Tombol Dinamis Dengan CSS3

Written by RA_Syihan on Friday, October 15, 2010 | Category: CSS3, Trick, Tutorial

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

Membuat Tombol Dengan CSS

Written by RA_Syihan on Friday, October 15, 2010 | Category: CSS3, Trick, Tutorial

Alhamdulilah setelah belajar mengenai CSS3 akhirnya saya bisa mengplikasikannya kedalam template dan berusah untuk mencoba-coba akhirnya bisa juga membuat widget yang berfungsi untuk blog. Kali ini saya akan menjelaskan bagaimana cara membuat Tombol dengan CSS3. Namun pada kenyataanya trik ini belum begitu baik untuk diterapkan, lalu kenapa ente bagikan kepada kita? walaupun belum sempurna, tapi tidak salahkan kalau saya bagikan ke sobat semua? Nah kalau ingin melihat tombolnya, sobat lihat aja ke bawah ini.

Demos

Bagaimana lumayan bagus bukan?? nah kode css yang saya gunakan bisa sobat lihat di bawah ini

.tombol {
width: 200px;
height: 50px;
margin: -30px auto;
border: 2px solid #4F93CA;
background-color: #428CF0;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
-moz-box-shadow:0 20px 20px #428CF0;
background-image: -moz-linear-gradient(#1C5B9B 0%, #6CBFFF 90%);
-webkit-border-radius-topleft: 20px;
-webkit-border-radius-bottomleft: 20px;
-webkit-box-shadow:0 20px 20px #428CF0;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#1C5B9B), to(#6CBFFF));
}

.tombol span {
text-shadow: 0px 1px 8px #2867A5;
font-family: Verdana;
color: #ffcc66;
font-size: 40px;
position: relative;
top: -5px;
left: auto;
}

dan kode HTML-nya dibawah ini

<div class="tombol"><span>Demos</span></div>

mungkin singkat sekali y kode HTML-nya. Walaupun simple tapi efeknya sob, gak nahan...!!! okelah kalau sobat ingin menanyakan sesuatu tentang trik ini, sobat bisa tinggalkan pesan di kotak komentar oke. sekarang saya akhiri dahulu.

sumber