Tombol Dinamis dengan CSS3

Setelah sekian postingan telah terupdate bukan mengenai CSS3 sekarang muncul lagi trik tentang CSS3. Mungkin banyak teman - teman saya yang menunggu postingan tentang css3 namun tidak saya tanggapi karena ada kesibukan offline namun sekarang saya berikan walaupun tidak banyak. Trik CSS3 kali ini tentang cara Tombol dinamis dengan CSS3, pada postingan sebelumnya mengenai Membuat Tombol Dengan CSS3 juga saya telah memberikan trik membuat tombol dengan CSS3, walaupun kedengarannya sama tapi bentuk dari tombolnya berbeda dengan yang sebelumnya.

Sebenarnya saya sangat menyukai sekali dengan CSS3 namun karena keterbatasan waktu dan uang untuk online, postingan tentang CSS3 agak terlambat saya update di blog ini, makannya apabila sahabat oketrik ingin diberi tanggapan pertanyaan yang telah dikirim ke saya, Klik lah iklan yang ada di blog ini, hanya sekali klik saja loh ga ada ruginyakan? malah istilahnya beramal. Oke deh dari pada saya cuap-cuap lebih baik saya langsung jelaskan saja tentang Tombol dinamis dengan CSS3. Lihat demonya dulu yuk!

Demo

tombol dinamis 1

Trik Blog

Tutorial

tombol dinamis 2

Free Download

Free Blogger Template

Jasa Kami

Pembuatan Web/Blog

CSS Yang di pakai :


.tmbl{display:inline-block; background:url(btn.bg.png) repeat-x 0px 0px; padding:5px 10px 6px 10px; font-weight:bold; text-shadow:1px 1px 1px rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.4); -moz-border-radius:5px; -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.5); -webkit-border-radius:5px; -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.5)}

.tmbl:hover{text-shadow:1px 1px 1px rgba(0,0,0,0.5); cursor:pointer}

.biru{background-color:#CCC; color:#141414}
.biru:hover{background-color:#00c0ff; color:#fff}

.hijau{background-color:#CCC; color:#141414}
.hijau:hover{background-color:#8aff00; color:#fff}


HTML yang di pakai :


<p>tombol dinamis 1 </p>
<div class="tmbl hijau">Trik Blog</div>
<div class="tmbl biru">Tutorial</div>
<div class="tmbl merah">Cheats</div>

<p>tombol dinamis 2 </p>
<div style="font-size:24px;">
<div class="tmbl hijau">Free Download</div>
<div class="tmbl biru">Free Blogger Template</div>
</div>

<div style="font-size:36px;">
<div class="tmbl hijau b2">Jasa Kami</div>
<div class="tmbl biru">Pembuatan Web/Blog</div>
</div>

Nah bagaiman Menarik bukan Tombol yang di buat dengan sentuhan CSS3? memang sich kalau dibandingkan dengan tombol yang di buat dengan jquery ataupun javascript lebih bagus tapi masing-masing mempunyai kelemahan tersendiri sekarang terserah sobat ingin memakai yang mana. Akhir kata Terima kasih dan Happy Blogging.

gambar oleh : http://free-css-menu.com

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg