✔ Cara Menciptakan Tombol Download 3D Dengan Css

Cara Membuat Tombol Download Dengan Css Pada Postingan - sebelum masuk kepada pembahasan beritahukan script yang aku dapatkan ini merupakan script dari dynamicdrive.com. 

Membuat Tombol downlod Dengan Css yang akan aku sampaikan merupakan sebuah penemuan untuk merubah sebuah tombol yang akan sahabat pasang pada sebuah postingan. sahabat sanggup pergunakan tombol ini untuk dipakai sebagai tombol Download, Demo, atau apa saja terserah harapan sahabat.

Dulu aku sering memakai gambar untuk menciptakan sebuah tombol download atau demo, tetapi kini dengan adanya instruksi css untuk mempercantik sebuah tombol maka aku 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 instruksi ]]></b:skin>
3. Letakan instruksi dibawah ini sempurna 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 harapan anada Untuk Demo nya Silahkan Lihat Disini Sekian.

Bagikan Artikel ini