Cara Membuat Tombol Download 3D Dengan CSS

Cara Membuat Tombol Download Dengan Css Pada Postingan - sebelum masuk kepada pembahasan SIMPANGblogger beritahukan script yang saya dapatkan ini merupakan script dari dynamicdrive.com
Membuat Tombol downlod Dengan Css yang akan saya sampaikan merupakan sebuah inovasi untuk merubah sebuah tombol yang akan sahabat pasang pada sebuah postingan. sahabat bisa pergunakan tombol ini untuk digunakan sebagai tombol Download, Demo, atau apa saja terserah keinginan sahabat.

Dulu saya sering menggunakan gambar untuk membuat sebuah tombol download atau demo, tetapi sekarang dengan adanya kode css untuk mempercantik sebuah tombol maka saya tidak perlu repot repot lagi meng upload gambar. Sahabat Tertarik dengan tombol ini silahkan ikuti cara nya dibawah ini.


1. Login ke Blogger >> Rancangan >> Edit HTML
2. Cari kode ]]></b:skin>
3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>


<style>

a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}

a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}

a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}

a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}

</style>

4.Lalu Pratinjau Kalau sudah tidak ada kesalahan Tinggal Simpan Tempelat
5.Silahakan Pasang Script ini Dimana saja diposting atau Widget
<a href="http://" class="css3dbutton">Sign Up!</a> Ganti Tulisan nya yang sesuai keinginan anada Untuk Demo nya Silahkan Lihat Disini Sekian.

Komentar

Posting Komentar