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