Cara Menciptakan Efek Button 3D Sederhana Dengan Css

Cara Membuat Efek Button 3D Sederhana - 3 Dimensi atau disingkat dengan 3D, dampak ini biasanya dipakai pada Animasi semoga terlihat benar-benar nyata. Pada kali ini aku akan membuat Efek Button 3D Sederhana, untuk membuat dampak 3D memakai CSS.

Pada prinsipnya Efek 3D ini menggunkan dampak hover, hover yakni dikala mouse disimpan di atasnya maka dampak tersebut akan muncul. Baiaklah, pribadi saja ya teman berikut ini langkah mudahnya :

Buka Editor Template Sobat, kemudian Sobat cari kode ]]></b:skin> , kemudian Anda cari Sobat salin instruksi dibawah ini dan pastekan diatasnya :

CSS

.btn3D {
display: block;
margin-right: 2px;
border: 2px solid;
border-color: #aaa #000 #000 #aaa;
width: 15em;
background: #0cc0b0;
}
.postthumb:hover  {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
outline: none;
}
.btn3D:hover {
position: relative;
top: 2px;
left: 2px;
border-color: #000 #aaa #aaa #000;
}

Selanjutnya Anda menuju Entri baru, kemudian Anda salin instruksi dibawah ini dan pastekan di Mode HTML

HTML

<a class="btn3D" href="URL Tujuan" rel="nofollow" target="_blank">Nama tujuan</a>

Demo

Efek Jatuh Pada Gambar

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/