Membuat tombol dengan efek hover keren pada postingan blog

Pada postingan saya kali ini saya akan share tutorial,tentang cara membuat tombol CSS keren dengan efek hover pada postingan blog.Tombol ini dibuat menggunakan CSS dengan efek hover yang keren mewakili dari warna yang berbeda,tombol yang akan kita buat ini untuk tombol Home,Demo dan Download. .Tapi anda juga bisa mengubah teksnya sesuai kebutuhan anda. .Langsung saja lihat demo gambarnya:

BAGAIMANA MENAMBAHKAN TOMBOL INI KE BLOG?

Tombol ini sangat mudah di gunakan,Sekarang saya ingin membagi cara instalasi widget ini menjadi dua bagian yaitu bagian untuk CSS dan bagian untuk HTML,Pada awalnya kita menambahkan kode CSS dulu ke tempelate kita,untuk membuat tombolnya.
Silahkan ikuti caranya di bawah ini:

• Masuk ke Dasboard blogger kalian
• Menuju ke menu tempelate
• Klik edit HTML
• Sekarang tekan ctrl+f untuk mempermudah mencari kode ]]></b: skin>
• Kalau kode ]]></b: skin> sudah ketemu
• Copy CSS di bawah ini dan letakan tepat diatas kode ]]></b: skin> pada tempelate anda

.button {

-moz-border-radius:5px 5px 5px 5px;

-webkit-border-radius:5px 5px 5px 5px;

border-radius:5px 5px 5px 5px;

-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);

background:scroll 0 0 #222222;

border-bottom:1px solid rgba(0, 0, 0, 0.25);

color:#FFFFFF !important;

cursor:pointer;

font-weight:bold;

line-height:1;

overflow:visible;

font-size:17px;

padding:8px 19px 9px;

position:relative;

text-decoration:none;

text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);

width:auto;

}

.demobutton {

background-color:#999999;

text-align:center;

width:100px;

}

.demobutton:hover {

background-color:#EB7D05;

}

.downloadbutton {

background-color:#999999;

text-align:center;

width:100px;

}

.downloadbutton:hover {

background-color:#00AC00;

}

.homebutton {

background-color:#999999;

text-align:center;

width:100px;

}

.homebutton:hover {

background-color:#1666DC;

}

.button:hover {

-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);

-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);

box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);

}

Sekarang kita telah menambahkan CSS (style) di tempelate, . .
Dan sekarang bagaimana cara menggunakanya? Silahkan pilih Kode HTML di bawah ini untuk membuat tombol di postingan anda. .!!

• Pastikan dulu anda beralih saat akan membuat postingan dari Compose ke HTML
• Pilih kode tombol di bawah ini dan pastekan dimana anda ingin menampilkan tombolnya

Kode untuk membuat tombol HOME

<a class="button homebutton" href="YOUR LINK HERE" rel="nofollow"

style="float: left;" target="_blank"><span style="display:

inline-block;">Homepage</span></a>

Kode untuk membuat tombol DEMO

<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow"

style="float: left;" target="_blank"><span style="display:

inline-block;">Live Demo</span></a>

Kode untuk membuat tombol DOWNLOAD

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE"

rel="nofollow" style="float: left;" target="_blank"><span style="display:

inline-block;">Download</span></a>

KETERANGAN:

• Text yang berwarna merah adalah untuk link anda
• Dan text yang berwarna biru adalah untuk kalimat di dalam tombol
• Silahkan ganti dengan keinginan anda

Nah begitulah cara membuat tombol menggunakan css pada postingan blog,sekian tutorial ini,semoga bermanfaat untuk kita semua.
Selamat mencoba dan Happy Blogging