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.

Komentar

Belantara Indonesia mengatakan…
sip brad...di coba ah (sambil mikir tombol apa yah?).....salam dan thx brad...
Belantara Indonesia mengatakan…
bis di pasang buat link di artikel juga ya brad?
Chugy mengatakan…
B.I :: Betul sekali Brader...bisa diaplikasikan dimana saja dan kapan saja wekwekwek...!!!!

Tinggal ditambakan kode pemanggilan Button CSS3-y saja. Sukses selalu.
Djangan Pakies mengatakan…
terus terang ane pingin model template punya Kang ChugygogoG dan Kang Adit B.I.
kasih saran Kang, maklum urusan edit HTML masih minim
Ferdinand mengatakan…
Wah berbagi tombol nie si Bozz hhe.... klo gak salah ada juga tuh Situs yg nyediain tombol ini tinggal ngatur Opacity sama temen2nya ntar dikasih KOdenya hhe..... ini klo buat Blog Download bagus nie hhe...

maaf telat Brader, happy blogging :P
Chugy mengatakan…
Ferdinand :: Ia Brader berbagi tombol saja...kalau berbagi duit si takutnya pada ngantri hehehehe...!!! Sukses selalu brader.

Djangan Pakies :: Wah si Um bisa saja...Padahal template blog ini biasa biasa saja. malahan template si UM yg keren ... Full CSS3.
Rizkyzone mengatakan…
wah keren nih sob langsung tak pasang deh
Rizkyzone mengatakan…
sudah tak coba, tp tamiplannya kok aneh yh sob, coba lihat di postingan saya yg judulnya "Loufhy DNA | Dhana Arsega"
Rizkyzone mengatakan…
sekalian aq mau request, itu bikin tulisan kaya blog kamu yg home page sama next page cara modifnya gimana? salnya aq masih kurang bgt mengerti soal CSS 3
Unknown mengatakan…
keren deh :)

masih menunngu kehadiran css 4 :)
fb mengatakan…
Tombolnya bagus.. Tanpa image background tapi bisa tampil gradasi gitu
Chugy mengatakan…
Rizky2009 ::setelah di cek ternyata terdapat kode </span> yang berulang seperti dibawah ini .

<span class="fullpost"><a class="buttom" href="http://rizky2009.blogspot.com/"><strong>Rizky2009</strong></a></span><span class="fullpost"><a class="buttom" href="http://rizky2009.blogspot.com/"><strong></strong></a></span><span class="fullpost"></span>

Coba ganti dengan yang seperti ini smoga berhasil.

<span class="fullpost"><a class="buttom" href="http://rizky2009.blogspot.com/"><strong>Rizky2009</strong></a><a class="buttom" href="http://rizky2009.blogspot.com/"><strong></strong></a></span>
Suparyanto mengatakan…
Kalau kita mau merubah warna gradasinya gimana kodenya(saat hover)?
satu lagi,cara bikin menu share kayang di akhir posting ini sahabat?
Belajar CorelDRAW mengatakan…
disave dulu sob,ada semangat otak atik lagi menu navi saya...thank's for ilmunya.
om rame mengatakan…
dengan membuat CSS Loading jadi Lebih ringan yah, sayangnya masih beLum mudeng sih. untuk sementara nyimak aja duLu deh, harap makLum yah. hehehe...
Unknown mengatakan…
Saya pastekan koq muncul kode merah"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog."
Ada yang kurang dimana ya sahabat?
Chugy mengatakan…
Suparyanto :: Coba dicek lagi um kodenya barangkali ada yang ketinggalan kopy-y....atau penempatannya, coba lihat lagi intruksinya dengan perlahan !!!
Ladida mengatakan…
mas . , punya saya kodenya agak beda . , saya pake CSS dari postingan kawan yg powerful itu . ,

sudah berhasil tp hovernya belum berhasil . ,

punya saya class="blog-pager-newer-link"

cssnya #blog-pager-newer-link { float: left; } ,
nah cssnya kalo ditambah hover gmn caranya ??

thanks . ,
Ladida Cafe mengatakan…
ini yg aku cari, CSS hover nya yg saya butuh, heheee

makasii bro Chugy

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text