Tombol CSS Putih Biru

Tombol CSS banyak digunakan pada design blog atau web yang berfungsi sebagai pemanis agar blog/web tampil lebih unik dan manis. Banyak blog/web yang menggunakan tombol CSS namun kali ini saya akan memberikan kode tombol CSS yang sederhana dan cukup unik, yaitu tombol CSS berwarna Putih Bir. Penggunaan tombol CSS ini sangat menguntungkan karena bila dibandingkan dengan menggunakan tombol bergambar/ tombol yang menggunakan background gambar pada saat loading halaman akan memakan waktu pada saat meload gambarnya walaupun hanya seilisih sedikit waktu loadnya.
Langsung saja di bawah adalah kode CSS buttonnya:

.button {
  cursor:pointer;
 -moz-box-shadow:inset 1px 1px 5px 1px #ffffff;
 -webkit-box-shadow:inset 1px 1px 5px 1px #ffffff;
 box-shadow:inset 1px 1px 5px 1px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2f2f2), color-stop(1, #3ec4e6) );
 background:-moz-linear-gradient( center top, #f2f2f2 5%, #3ec4e6 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#3ec4e6');
 background-color:#f2f2f2;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #b3a9a5;
 display:inline-block;
 color:#080808;
 font-family:arial;
 font-size:14px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:1px 2px 7px #ffffff;
}.button:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3ec4e6), color-stop(1, #f2f2f2) );
 background:-moz-linear-gradient( center top, #3ec4e6 5%, #f2f2f2 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3ec4e6', endColorstr='#f2f2f2');
 background-color:#3ec4e6;
}.button:active {
 position:relative;
 top:1px;
}

Dan cara pemanggilannya:
<div class="button">
Button</div>

Untuk demonya di bawah ini:

Button

19 komentar:

  1. Blognya keren banget nih.. sob...

    mantap

    salam kenal

    komentarin artikel ini

    http://www.timkomte.com/2012/09/traffic-pengunjung-rumahku-turun.html

    BalasHapus
  2. Harusnya supaya lebih bagus, di selektor css dasar ".button" jangan dikasih border dulu, dikasih juga gapapa asal sedikit nyaman dari background.

    nah pas dihover baru kasih border yang agak kelihatan + dikasih box-shadow, kira-kira box-shadow yang agak ngeblur "box-shadow:0 0 5px" atau 7px, nah pas di teken ":active", baru deh kasih inset sama position:relative, kasih aja top 2px atau 1px.

    warna juga harus dikontrasin :-) supaya keren.

    tapi begini juga mantapp :-)

    BalasHapus
    Balasan
    1. ckckc, okok thanks sarannya. saya pake cssbutton generator :D

      Hapus
  3. keren sob.., thx ilmux ya.., btw templatex keren abissss...! *smile

    BalasHapus
    Balasan
    1. sip. thanks telah berkunjung. :D

      Hapus
    2. pake css .blog-author a nih, sekalian make :after{content:"ADMIN";} hehe =D

      Hapus
    3. ya bener css pseudo ":after" itu kanan kalo ":before" kiri. tambahin aja di bawah ]]bskin, iya sekalian
      "#comments" kasih text-align:left; soalnya ga rata nih tulisannya hahaha liat aja tuh.

      Hapus
  4. waah, mas Bayu ttg CSS pinter jeh,
    Buku ttg CSS tuk pemula yg gampang dipahami ada gak mas, klo ada tolong kasih infonya lewat komentar ini ya mas,
    terima kasih sebelumnya....

    BalasHapus
    Balasan
    1. saya juga belajar cari2 di gmbah gogle kok :D
      klo buku saya kurang tau paling tutorial2 banyak kok tutorial2 blog.

      Hapus
  5. waw....bagus juga tuh tombol CSSnya :D
    ijin bookmark dulu...siapa tahu saya butuh tutorial ini \m/

    BalasHapus

Silahkan berkomentar dengan bahasa yang baik sesuai dengan isi artikel :)