Advertise

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.

19 komentar:

  1. sip brad...di coba ah (sambil mikir tombol apa yah?).....salam dan thx brad...

    BalasHapus
  2. bis di pasang buat link di artikel juga ya brad?

    BalasHapus
  3. B.I :: Betul sekali Brader...bisa diaplikasikan dimana saja dan kapan saja wekwekwek...!!!!

    Tinggal ditambakan kode pemanggilan Button CSS3-y saja. Sukses selalu.

    BalasHapus
  4. terus terang ane pingin model template punya Kang ChugygogoG dan Kang Adit B.I.
    kasih saran Kang, maklum urusan edit HTML masih minim

    BalasHapus
  5. 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

    BalasHapus
  6. 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.

    BalasHapus
  7. wah keren nih sob langsung tak pasang deh

    BalasHapus
  8. sudah tak coba, tp tamiplannya kok aneh yh sob, coba lihat di postingan saya yg judulnya "Loufhy DNA | Dhana Arsega"

    BalasHapus
  9. 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

    BalasHapus
  10. keren deh :)

    masih menunngu kehadiran css 4 :)

    BalasHapus
  11. Tombolnya bagus.. Tanpa image background tapi bisa tampil gradasi gitu

    BalasHapus
  12. 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>

    BalasHapus
  13. Kalau kita mau merubah warna gradasinya gimana kodenya(saat hover)?
    satu lagi,cara bikin menu share kayang di akhir posting ini sahabat?

    BalasHapus
  14. disave dulu sob,ada semangat otak atik lagi menu navi saya...thank's for ilmunya.

    BalasHapus
  15. dengan membuat CSS Loading jadi Lebih ringan yah, sayangnya masih beLum mudeng sih. untuk sementara nyimak aja duLu deh, harap makLum yah. hehehe...

    BalasHapus
  16. 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?

    BalasHapus
  17. Suparyanto :: Coba dicek lagi um kodenya barangkali ada yang ketinggalan kopy-y....atau penempatannya, coba lihat lagi intruksinya dengan perlahan !!!

    BalasHapus
  18. 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 . ,

    BalasHapus
  19. ini yg aku cari, CSS hover nya yg saya butuh, heheee

    makasii bro Chugy

    BalasHapus