Home Archives for 03/22/16

Cara mempercantik tombol dengan css

02:23:00 |
Selamat sore para sobat blogger.Mungkin banyak orang yang sudah tahu artikel ini, tapi tidak apa-apa lah.Siapa tahu bermanfaat.Membuat tombol menarik dengan css ini bisa dibilang cukup mudah untuk teman-teman pahami.Sebelum saya membuat tutorial ini, saya sudah membuat tutorial tentang Berkenalan dengan CSS dan Cara membuat tabel menjadi menarik dengan CSS, dan untuk teman-teman yang belum berkenalan dengan css silahkan baca dulu artikel itu.Oke sekarang mari kita ke topik.

Pertama, kita buat struktur html-nya dulu karena, silahkan langsung copy kode di bawah ini. 

<html>
<head>
 <title>Belajar CSS</title>
</head>
<body>

   <h1>Membuat tombol menarik dengan css</h1>

 <li><a href="#" class="button tombol1">Tombol 1</a></li>
 <li><a href="#" class="button tombol2">Tombol 2</a></li>
 <li><a href="#" class="button tombol3">Tombol 3</a></li>
</body>
</html>

pada kode diatas kita belum mempercantik css. Maka dari itu hasilnya seperti di bawah ini.

disitu saya membuat dua class, apa kegunaan class sendiri? kegunaan class itu untuk mengatur kode css-nya, misalkan akan kita tambahkan margin, padding.Gimana sudah mengerti? oke kita lanjut.
Sekarang kita akan buat tombol itu menjadi cantik dengan css, silahkan copy script css-nya di bawah ini. 

/*Untuk mempercantik tombol*/
      .button{
       display: block;                  /*Berfungsi untuk membuat list tersebut berbentuk vertikal*/
       width: 100px;                    /*Memberikan ukuran sebesar 100px dari browser*/
       margin: 20px;                    /*Memberikan jarak pada elemen luar*/
       padding: 10px;                   /*Memberikan jarak pada elemen dan konten*/
       box-shadow: 1px 1px 2px #8899a9; /*untuk memberikan bayangan pada tombol*/
       border-radius: 10%;              /*membuat tombol menjadi bulat dengan ukuran yang sesuai*/
       text-align: center;              /*Text akan berada di tengah pada tombol*/
      }

      .tombol1{
       background-color: #00ffff; /*Warna pada tombol*/
      }

      .tombol1:hover{
       background-color: rgba(28, 114, 44, 0.3); /*Ketika di hover atau di kursor mouse berada ke tombol dia akan berubah warnanya*/
      }

      .tombol2{
       background-color: #ffcc11; /*Warna pada tombol*/
      }

      .tombol2:hover{
       background-color: rgba(191, 165, 251, 0.4); /*Ketika di hover atau di kursor mouse berada ke tombol dia akan berubah warnanya*/
      }

      .tombol3{
       background-color: #ff3333; /*Warna pada tombol*/
      }

      .tombol3:hover{
       background-color: rgba(0, 135, 173, 0.4); /*Ketika di hover atau di kursor mouse berada ke tombol dia akan berubah warnanya*/
      }

      a{
       text-decoration: none; /*Menghilangkan garis bawah pada text*/
       color: black;          /*Memberikan warna pada text dengan warna hitam*/
      }

      li{
       list-style: none;  /*Untuk menghilangkan tombol hitam disamping list*/
      }

Dan setelah anda copy script di atas silahakan anda lihat hasilnya.

Demo


Untuk penjelasannya bisa kalian lihat di kode-kodenya ya.
Sekian dari saya terima kasih.Semoga bermanfaat.
Subscribe to: Posts (Atom)