Pure CSS3 Hover Button

Pure CSS3 Hover Button adalah tombol yang bisa Anda gunakan untuk membuat tombol download, demo dan sebagainya terserah Anda ingin mengisinya dengan apa!
Sebelumnya Oto Webiste pernah membahas CSS3 Button yang berjudul "Membuat Tombol CSS3"yang menggunakan Alat dengan efek gardient dan kali ini blog Oto Website akan membahas CSS3 Button juga dan kali ini temanya adalah Pure CSS3 Hover Button, dari namanya saja kita sudah tau bahwa untuk Membuat Pure CSS3 Hover Button ini kita akan menggunakan kode CSS3 untuk membuatnya. Untuk lebih jelasnya dan demo dari Pure CSS3 Hover Button silahkan Anda lihat demo yang saya siapkan di bawah ini.

Live Buttons Demo ↓

---

Cara Menginstal Pure CSS3 Hover Button

---

Caranya dan Penerapannya juga sagat mudah, silahkan Anda ikuti instruksi berikut untuk mulai menginstal  Pure CSS3 Hover Button pada template blog Anda.

1. Masuk ke akun blogger Anda.

2. Pada Dasbor klick Template ➨  Edit HTML.

3. Centang Expand Template Widget ➨ Backup dulu template Anda.

4. Selanjutnya dalam Edit Template cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya coba lihat Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang copy kode CSS3 di bawah ini dan paste atau letakkan di atas kode tadi.

.button, .button:visited {
 background: #222 url(https://otowebsite-blogspot.googlecode.com/svn/trunk/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;
 font-family: calibri;
}

.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);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.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. Simpan template.

Anda sekarang sudah berhasil meginstal Pure CSS3 Hover Button pada template Anda. Sekarang baca langkah selanjutnya.

---

Bagaimana Menggunakan Tombol ini ???

---

Tombol-tombol ini sangat mudah digunakan, di bawah ini saya memberikan Kode HTML atau kode Pemanggil semua jenis Pure CSS3 Hover Button.
Caranya cukup sederhana.

Saat mengedit posting klik pada tab Edit HTML
Pilih kode pemanggil tombol di bawah ini dan pastekan ke dalam postingan Anda.

1. HTML Code Large Buttons.

<center><a href="URL" class="large button pink" >NAME</a></center>

<center><a href="URL" class="large button blue" >NAME</a></center>

<center><a href="URL" class="large button green" >NAME</a></center>

<center><a href="URL" class="large button orange" >NAME</a></center>

<center><a href="URL" class="large button red" >NAME</a></center>

<center><a href="URL" class="large button yellow" >NAME</a></center>

2. HTML Code Medium Buttons.

<center><a href="URL" class="medium button pink" >NAME</a></center>

<center><a href="URL" class="medium button blue" >NAME</a></center>

<center><a href="URL" class="medium button green" >NAME</a></center>

<center><a href="URL" class="medium button orange" >NAME</a></center>

<center><a href="URL" class="medium button red" >NAME</a></center>

<center><a href="URL" class="medium button yellow" >NAME</a></center>

Perhatikan kode pemanggil di atas, dari kode tersebut ada yang harus Anda rubah di antaranya:

• Ganti teks URL dengan Url atau link tujuan.
• Ganti teks NAME dengan nama tombol.

Sekian untuk kali ini semogan Anda suka dengan tutorial di atas!

Silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau artile yang kita bahas kali ini!