0 Membuat Tombol Dengan CSS3 "Button CSS3 Style"

Kali ini saya mencoba membuat tombol atau buttom dengan CSS3 dengan menggabungkan ronded corner, Gradient linear CSS3 dan Box shadow CSS3 agar lebih menarik tampilan dari button ini. Button ini bisa di aplikasikan pada link di postingan maupun pada bagian template yang anda inginkan.

Contoh Button menggunakan CSS3

Untuk membuatnya silahkan ikuti langkahnya dibawah ini.
Masuk pada Edit HTML masukan kode dibawah ini, diatas kode ]]></b:skin>

.buttom{
padding: 8px;padding-top:6px; padding-bottom:6px;
margin-right:3px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc));
background: -moz-linear-gradient(top, #f3f3f3, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
background-color:#fff;
}

.buttom a, .buttom:hover {
padding: 8px;padding-top:6px; padding-bottom:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#f3f3f3));
background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
text-decoration: none;
color:#000;
}

Silahkan dismpan terlebih dahulu.

Kode diatas merupakan pengaturan untuk Button dengan CSS3, untuk mengaplikasikannya kita tinggal memanggil selector button diatas yaitu dengan menambahkan class="buttom pada link yang akan dipasang

Contoh kode link sebelum menggunakan class="buttom, seperti ini :

<a href="linkanda.blogspot.com">Judul link anda</a>

Contoh link yang telah dipasangkan class="buttom, seperti ini.

<a href='linkanda.blogspot.com' class="buttom">Judul link anda</a>

Sekarang coba anda buat link pada postingan atau sidebar, tambahkan kode class="buttom seperti contoh diatas, dan lihat hasilnya. Selamat mencoba

NB :: Pembuatan Button ini mungkin hanya sebagai contoh sederhana, untuk pengembangannya silahkan dipelajari lebih lanjut. Sukses selalu.

Tweet

Komentar →