Setelah maen-maen sama Menu Navigasi, kali ini saya masih mau mengajak anda bermain-main dengan CSS3 Button, tapi button kali ini gak akan kita buat menjadi Menu Navigasi kaya yang sebelum-sebelumnya, melainkan kita biarkan aja dengan bentuk seadanya hhe...
Klo gak salah sih dulu saya udah pernah bikin Tutorial CSS3 Button, tapi itu cuma dasarnya dan disitu saya nyuruh anda untuk mengembangkannya sendiri, Nha, ditutorial kali ini baru kita bikin Button yang rada gayaan dikit wkwkkwk...
Untuk bentuknya, silahkan perhatikan Gambar diatas, atau klo mau langsung liat demonya, silahkan klik link demo dibawah ini:
Lantas bagaimana cara membuatnya?
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
#dark{
background-color:#333;
border:1px solid #000;
padding:10px;
margin-top:20px;}
#light{
background-color:#FFF;
border:1px solid #dedede;
padding:10px;
margin-top:20px;}
li{
list-style:none;
padding-top:10px;
padding-bottom:10px;}
.button, .button:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
.button:hover { background-color: #111; color: #fff; }
.button:active { top: 1px; }
.small.button, .small.button:visited { font-size: 11px}
.button, .button:visited,
.medium.button, .medium.button:visited { font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited { font-size: 14px;
padding: 8px 14px 9px; }
.super.button, .super.button:visited { font-size: 34px;
padding: 8px 14px 9px; }
.pink.button, .magenta.button:visited { background-color: #e22092; }
.pink.button:hover { background-color: #c81e82; }
.green.button, .green.button:visited { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.red.button, .red.button:visited { background-color: #e62727; }
.red.button:hover { background-color: #cf2525; }
.orange.button, .orange.button:visited { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.blue.button, .blue.button:visited { background-color: #2981e4; }
.blue.button:hover { background-color: #2575cf; }
.yellow.button, .yellow.button:visited { background-color: #ffb515; }
.yellow.button:hover { background-color: #fc9200; }
6. Jika sudah, beralihlah dan cari Kode <body> dan letakkan Kode HTML dibawah ini tepat dibawah atau setelah kode <body> tersebut.
<div id="light">
<ul>
<li><a class="super button pink">Pink Button</a>
<a class="large button green">Green Button</a></li>
<li> <a class="large button blue">Blue Button</a>
<a class="large button red">Red Button</a></li>
<li><a class="large button orange">Orange Button</a>
<a class="large button yellow">Yellow Button</a></li>
</ul>
</div>
<div id="dark">
<ul>
<li><a class="super button pink">Pink Button</a>
<a class="large button green">Green Button</a></li>
<li> <a class="medium button blue">Blue Button</a>
<a class="large button red">Red Button</a></li>
<li> <a class="small button orange">Orange Button</a>
<a class="medium button yellow">Yellow Button</a></li>
</ul>
</div>
7. Save Template anda dan lihat hasilnya.
Nha, untuk menggunakannya dipostingan, silahkan penggal sesuai kebutuhan anda, misal anda hanya ingin menggunakan Button berwarna Pink, anda hanya perlu memasukkan <a class="super button pink">Kalimat</a>. Mudah bukan? yang terpenting disini adalah class-nya dapat terpanggil.
Selamat Mencoba...
