Home CSS

Simple Button Download and Demo

Simple Button Download and Demo
Sebenarnya sudah banyak orang yang share tutorial kayak beginian dan juga banyak kok yang bisa kalian cari lagi bila ingin lebih bagus dari tutorial ini dan inspirasi juga datang dimana saja jadi disini saya kasih tahu tutorial awal buatnya saja dan nanti kalian kembangkan lagi.

Simple Button Download and Demo


Langsung saja ke tutorialnya sob karena saya males kalau basa basi sih 😒 saya anggap kalian sudah punya bahanya. Belum punya? kalian bisa lihat bahanya apa saja dibawah ini :


  1. Text Editor (Sublime, Notepad++, Visual Studio Code, dll)
  2. Browser (pakai IE juga gpp sih cuman kalau mau itu juga :'v)
  3. Dah segitu bahanya..

Buka Text Editor > buat file bernama Button.html

<!DOCTYPE HTML>

<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Simple Button</title>
</head>

<body>

</body>

</html>

Kemudian buat style.css

Panggil kode style.css tersebut, sehingga jadi seperti ini

<!DOCTYPE HTML>

<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Simple Button</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

</body>

</html>
Pada bagian <body> kalian tambahkan kode berikut
<div class="container">
 <div class="button">
  <a href="" class="btn-blue">Download</a>
  <a href="" class="btn-red">Demo</a>
 </div>
</div>
Selanjutnya buka style.css dan copy kode dibawah, sudah saya jelaskan pada setiap kodenya
  *{
   margin: 0;padding: 0;
  }
  a:link, a:visited, a:hover{text-decoration: none}
  body{
   font-size: 24px;
   font-weight: 600;
   font-family: 'Roboto', arial sans-serif;
   background: #f1f1f1;
  }
  .container{
   position: absolute;
   top: 50%; 
   left: 50%;
   transform: translate(-50%,-50%);
  }
  .button{
      display: flex; /* ini memudahkan kita untuk membuat button sama atau sejajar */
      justify-content: center; /* agar button berada di center */
      align-items: center; /* sama supaya center */
  }
  .button a{
   position: relative; /* posisi akan terletak normal */
      min-width: 80px; /* maksudnya ukuran kecil susah jelasinnya */
      text-align: center; /* supaya text ditengah */
      display: inline-block; /* supaya button sejajar */
      padding: 12px 25px; /* supaya ngak gepeng bisa atur sesuaikan */
      font-size: 14px; /* ukuran text button */ 
      font-weight: 700; /* ketebalan text */
      transition:all .1s; /* untuk menentukan lamanya animasi */
      margin: 10px 15px; /* supaya tidak berdempetan */
  }
  .button a:after{
   content: ''; /* biarkan kosong */
      background: rgba(0,0,0,0.05); /* background transparent */
      height: 100%; 
      right: 0;
      left: 0;
      bottom: 0;
      width: 0;
      position: absolute; /* meninmpa elemene lain */
      z-index: 1; /* supaya animasinya terlihat pakai z-index jadinya akan diutamakan */
      transition: all .3s; /* animasi */
  }
  .button a:hover:after{
      width: 100%;
      left: 0;
      right: auto;
  }
  .button .btn-blue{
   background: blue; /* warna dari button blue */
   color: white; /* warna text dari button blue */
  }
  .button .btn-red{
   background: red; /* warna dari button blue */
   color: white; /* warna text dari button blue */
  }
Sekarang kalian coba lihat hasilnya pasti akan seperti dibawah ini
See the Pen
Simple Button Download and Demo by Rian_kuno (@rian_kuno)
on CodePen.

Baca juga :

to Top