Button Shapes CSS3
Sedikit mengenal CSS3, kali ini kita kupas tentang macam-macam button css3.
ditambah sedikit fungsi hover agar terkesan lebih menarik.
mari kita liahat contoh-contohnya :
Demo Button Shapes CSS3Klik disini untuk melihat demo Button Shapes CSS3
Untuk menerapkan pada blog kita, sebenarnya cukup dengan 2 cara..
Yaitu :
LANGKAH 1
Masukan kode CSS dibawah ini pada Rancangan Edit HTML blog sobat,
tepatnya diatas kode ]]></b:skin>
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .6em 2em .6em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.besar { font-size:16px; }
.kecil { font-size:9px; }
.lonjong { -webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em; }
.persegi { -webkit-border-radius: .0em;
-moz-border-radius: .0em;
border-radius: .0em; }
.kotak { padding: 2.5em 2em 2.5em; }
.bulat { -webkit-border-radius: 4em;
-moz-border-radius: 4em;
border-radius: 4em;
padding: 2.5em 1.8em 2.5em; }
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f7941d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
Save template, lalu berlanjut ke langkah selanjutnya.
LANGKAH 2
Jika ingin menampilkan didalam postingan, maka masukan kode pemanggil Button dibawah ini,
dan masukan ke halaman posting dengan mode Edit HTML.
tapi jika ingin menampilkan nya di sidebar, maka pilihlah add gadget HTML/Java Script untuk memasukan
kode pemanggilnya.
dan inilah kode pemanggil Button tersebut :
Untuk Button jenis Besar
<a href="#" class="button orange besar">Besar</a>
Untuk Button jenis Sedang
<a href="#" class="button orange">Sedang</a>
Untuk Button jenis Kecil
<a href="#" class="button orange kecil">Kecil</a>
Untuk Button jenis Kotak
<a href="#" class="button orange kotak">Kotak</a>
Untuk Button jenis Bulat
<a href="#" class="button orange bulat">Bulat</a>
Untuk Button jenis Lonjong
<a href="#" class="button orange lonjong">Lonjong</a>
Untuk Button jenis Persegi Panjang
<a href="#" class="button orange persegi">Persegi Panjang</a>
Ganti kode yang berwarna merah dengan URL link yang sobat tuju.
Source Code Button Shapes CSS3Klik disini untuk mengambil source code Button Shapes CSS3
Tergantung semua selera sobat ingin memakai jenis button apa..
kalo mau digunakan semua jenisnya pun, monggo..
tidak ada larangan. bahkan kalo sobat sudah mengerti CSS,
tinggal sobat rubah saja warna or bentuknya, sesuai dengan selera sobat.
Untuk mengetahui jenis Button,
Silahkan lihat demonya
terlebih dahulu.
Ok, jika langkah-langkah diatas sudah dijalankan sesuai aturan,
maka setelah itu, lihatlah hasil nya..
menarik bukan ??
cukup sekian dari ane..
semoga bermanfaat..
Ini baru jenis Shapes dari banyak contoh button CSS3.. Selanjutnya, Insya Allah kita bahas jenis lain nya.. Penasaran seperti apa jenis Button selanjutnya??!! Tongkrongin az terus disini.. :D
Posted by Girant_31
on 08.28. Filed under
Css,
Tips n Trik
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response
waw mantap cuy nih buttonnya...tutorialnya sangat bermanfaat dan kreatif...salam...
jangan2 blog ini udah disuntikkan mode CSS ya..? pantes canggih banget.:D
nongkrong terus disini untuk menanti jenis selanjutnya ....
wah info baru lagi nich
keren sob ntar tak coba
thank's
nggak rugi ngesave link blognya mas agoes :D .. updatenya bagus2 :)
Wes....selalu mantabz tutornya Sob....
save dulu aj ah....kapan2 aku coba.... Happy blogging n semangat!!!
okeh, ane coba y..
mampir om :)
baru ketemu lagi nih sob, apa kabar ? sory nih baru sempet mampir. sob bantu aku edt blog aku yaaa
@1936564788628162198.0
Thanks mas..
thanks jg ats appresiasi dan kunjungan nya..
@7926414305490581014.0
Bukan disuntik lagi mas..
tapi di inpus.. wkwkwk..
@508021532468802560.0
nongkrong nya jangan kelamaan pak liek..
ntar keluar tuh.. :D
@3253075628449636712.0
Monggo mas..
moga bermanfaat ya mas..
@7926414305490581014.0
Bukan disuntik lagi mas..
tapi di inpus.. wkwkwk..
tes
@1936564788628162198.0
Thanks mas..
thanks jg atas kunjungan dan appresiasinya..
@7926414305490581014.0
Bukan disuntik lagi..
tapi di inpus mas.. wkwkwk..
keren sekalian tes koment
tes
@6027755486618667821.0
tes
@6027755486618667821.0