Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Rabu, 30 Juni 2010

Membuat Tombol Dengan CSS3

Kategori : ,
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. Terima kasih dan Salam OT oketrik.blogspot.com
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

9 Komentar untuk Membuat Tombol Dengan CSS3

pertamax sob...
kunjungan pagi ne..
makasih ya tut'a...
tapi menurut saya lebih asik page botton gambar, terutama dari photoshop...

@jaka zulham >> iya sob, lebih leluasa untuk mendesainnya....

Justru belum sempurna kan bisa disempurnakan sma BLogger yg lain hhe.......mantabz Sob......thnx 4 share....berarti ga perlu Upload Image Tombolnya ya Sob???....
Semangat N Met aktivitas Sob!!

demonya gag mau jalan brader

As. Malam bos blogger. Mksh atas trik web nya. Ko pertanyaan saya yang minggu kmarin blum ada respon. Tapi sy terimksh juga udh terima tip ini. Pertanyaan saya nie. 1) Cara membuat menu, tapi kalo di klik muncul anak menunya. itu giman bos; 2)Saya punya yayasan, mau bikin formulir pendaptaran online di blog sya. Blog sy sudah di hosting di 000webhost. gmn bos caranya ?

Wah itu wajib di jawab lho kak oketrik.....
kalo mau simple bisa dengan list o matik kan....hehehee
tapi tunggu aja jjawaban ama kak oketrik....

semakin maju gan.....

@Permata Biru Blogger >> sebelumnya maaf klo belum di respon, untuk pertanyaan pertama mungkin saya bisa buatkan tapi untuk pertanyaan kedua saya belum mengerti saya juga masih tahap belajar, tapi klo saran saya pakai emailmeform aja trus buat di halaman post atau di halaman yang lain, tapi klo salah saya minta contohnya agar saya dapat mempelajarinya...

@Muh azhie >> sip makasih semangatnya, kayanya muh azhie lebih tau tentang pertanyaan pertama mas Permata biru Blogger, coba saja tanya dengannya....
---------<><><><><><><><>---------
Maaf mas Permata Biru Blogger saya cuma seorang newbie masih dalam tahap pembelajaran....

Terima kasih all ^_^

wah keren nie mw saya coba nie

ini d taruh d mana??
lw pakek blogger??