Blogger Tutorial

Cara Membuat Pure CSS3 Hover Button

10.06,9 Comments


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...




hosting indonesia

You Might Also Like

9 komentar:

  1. wah wah contone ada yang pink , mirip seragam tk ponakanku, warna romantis he he
    bidv tadi search di gugel yang p.o terakhir bl oktober 2010 ane jadi parno, ppc 'ac' juga repot pak.. lha klik validnya ip unik /forever, cokiesnya enggak per 24 hour seperti gugel ads.. puyeng dot html wkwkwkk
    huee.. lha jare mo ngurus dj-site malah masih ngumpet disini wae to? ciakakakak.. kabuurr

    BalasHapus
  2. wedew kalao uda yang kayak gini nga mudeng aw mas...hehe

    BalasHapus
  3. Tidak ngerti sih manfaatnya untuk apa...semoga pemilik blog bisa jelasin yah...

    BalasHapus
  4. @ sichandra : Silahkan... :)

    @ Jiox : Lha nggeh kui, soal'e nek tk kasih satu warna Warna thok, takutnya nanti ada yg nanya lagi, untuk warna lain gimana? lha makanya tak bikin sekalian ae haha... Walah AC mah emank sistem 1 UV Forover pak haha...

    @ BaliMoz : Hhe... ndak apa2 kok, pelan2 juga mudeng pasti :)

    @ Trik Internet Gratis : Makasih atas kunjungannya Sob... tapi maaf blog ini memang hanya saya gunakan sebagai Gudang jadi saya memang gak memberikan ruang untuk X-Link di blog ini.. :)

    BalasHapus
  5. @ fadlyirma: Tergantung mau dipake buat apa, klo punya Blog yg mengarahkan Link Download bisa digunakan untuk Tombol Download, klo mau digunakan sebagai navigasi menu jg bisa... :)

    BalasHapus
  6. your site's, na choa.. yeppo yo.. :)
    wanna made one, but its kinda difficult. :(

    BalasHapus
  7. @ Anonim: Thank's :) maybe you can follow step by step ...

    BalasHapus