Untuk kali ini admin akan membagikan cara membuat Button keren, fungsi ini cocok untuk blog kalian yang membagikan link seperti blog Film, blog Software.
Baiklah tanpa berbasa basi lagi, berikut ini cara penerapan pemasangan tombol button yang keren:
Berikut ini adalah source code CSS.
.myButton {
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
background-color:#b8e356;
border-radius:6px;
border:1px solid #83c41a;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #86ae47;
}
.myButton:hover {
background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
background-color:#a5cc52;
}
.myButton:active {
position:relative;
top:1px;
}
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
background-color:#b8e356;
border-radius:6px;
border:1px solid #83c41a;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #86ae47;
}
.myButton:hover {
background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
background-color:#a5cc52;
}
.myButton:active {
position:relative;
top:1px;
}
1. Copy semua source code di atas
2. Masuk ke menu tab thema sebelah kanan pada blogger agan selajutnya pilih Customize
3. Selanjutnya pilih tab adjust widths dan paste source code css di atas kedalam kotak
4. Simpan dengan menekan tombol Apply to Blog. seperti contoh gambar dibawah ini:
5. Setelah teman-teman memasang source code CSS seperti di atas selanjutnya teman-teman masuk ke menu posting pada blog dan copy source code HTML berikut ini
<div class="separator" style="clear: both; text-align: center;">
<a class="myButton" href="http://blogw4ru.blogspot.com">DEMO</a> <a class="myButton" href="http://blogw4ru.blogspot.com">DOWNLOAD</a></div>
<a class="myButton" href="http://blogw4ru.blogspot.com">DEMO</a> <a class="myButton" href="http://blogw4ru.blogspot.com">DOWNLOAD</a></div>
6. Selanjutnya letakkan tombol button sesuai dengan yang teman-teman inginkan
Lihatlah sekarang tombol button Demo dan Download terlihat keren bukan. Oke sampai disini saja untuk tutorial mengenai cara membuat tombol Demo dan Download yang keren. Terimakasih dan semoga sukses.
Comments