Membuat Tombol Button Oval - Berbagai macam bentuk Tombol Button diciptakan semoga tampilannya lebih menjadi menarik, salah satunya tampilan tombol button berikut ini berbentuk oval. Bentukknya cukup sederhana namun dari kesederhanaan sanggup 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 lalu pastekan diatasnya :
5. Simpan Template
6. Selanjutnya diharapkan arahan pemanggil, adalah dengan memakai arahan HTML. Untuk arahan pemanggil Anda terapkan arahan dibawah ini pada Entri gres pada Mode HTML
Semoga bermanfaat! Sumber http://www.websiteedukasi.com/
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 lalu 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;
}
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 diharapkan arahan pemanggil, adalah dengan memakai arahan HTML. Untuk arahan pemanggil Anda terapkan arahan dibawah ini pada Entri gres pada Mode HTML
<div class="btn-animated rounded blue" style="width: auto;">
<a href="URL Tujuan" target="_blank">Download</a></div>
<a href="URL Tujuan" target="_blank">Download</a></div>
Semoga bermanfaat! Sumber http://www.websiteedukasi.com/