Membuat Tombol Button Oval di Blog

Membuat Tombol Button Oval - Berbagai macam bentuk Tombol Button diciptakan agar tampilannya lebih menjadi menarik, salah satunya tampilan tombol button berikut ini berbentuk oval. Bentukknya cukup sederhana namun dari kesederhanaan dapat menghasilkan tampilan elegan, berikut ini screnshotnya :

Jika Anda tertarik, berikut ini langkah-langkah pembuatannya :

1. Login Keakun Blogger
2. Pilih Template >> klik Edit HTML
3. Lalu Anda cari kode ]]></b:skin>
4. Kemudian Anda copy dibawah ini kemudian pastekan diatasnya :

.blue {
border: solid 1px #000;
background-color: #004AB6;
background: -moz-linear-gradient(top, #001186 0%, #909090 100%);
background: -webkit-linear-gradient(top, #001186 0%, #909090 100%);
background: -o-linear-gradient(top, #001186 0%, #909090 100%);
background: -ms-linear-gradient(top, #001186 0% ,#909090 100%);
background: linear-gradient(top, #001186 0% ,#909090 100%);
-webkit-box-shadow: 0px 0px 1px #002AC7, inset 0px 0px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 1px #002AC7, inset 0px 0px 1px #FFFFFF;
box-shadow: 0px 0px 1px #002AC7, inset 0px 0px 1px #FFFFFF;
}
.rounded {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.btn-animated {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
height: 18px;
color: #111 !important;
padding: 10px 25px;
margin: 0 20px;
text-shadow: 0px 1px 0px rgba(255,255,255,0.3);
text-decoration: none;
}

5. Simpan Template
6. Selanjutnya diperlukan kode pemanggil, yaitu dengan menggunakan kode HTML. Untuk kode pemanggil Anda terapkan kode dibawah ini pada Entri baru pada Mode HTML

<div class="btn-animated rounded blue" style="width: auto;">
<a href="URL Tujuan" target="_blank">Download</a></div>

Semoga bermanfaat!

Bagikan Artikel ini