Posted by Aak
Aak-share.com Updated at: 12:03:00 AM

Cara Membuat Efek Button 3D Sederhana dengan CSS

No comments:
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!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments