Cara Membuat Efek Button 3D Sederhana dengan CSS

Cara Membuat Efek Button 3D Sederhana - 3 Dimensi atau disingkat dengan 3D, efek ini biasanya digunakan pada Animasi agar terlihat benar-benar nyata. Pada kali ini saya akan membuat Efek Button 3D Sederhana, untuk menciptakan efek 3D menggunakan CSS.

Pada prinsipnya Efek 3D ini menggunkan efek hover, hover yaitu ketika mouse disimpan di atasnya maka efek tersebut akan muncul. Baiaklah, langsung saja ya sobat berikut ini langkah mudahnya :

Buka Editor Template Sobat, kemudian Sobat cari kode ]]></b:skin> , lalu Anda cari Sobat salin kode 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 kode 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!

Subscribe to receive free email updates: