Jumat, 22 November 2013

Kode CSS: Membuat Efek Button 3D Sederhana

Jumat, November 22, 2013

Kode CSS: Membuat Efek Button 3D Sederhana - Dahulu kala untuk membuat sebuah efek 3D (tiga dimensi) dalam sebuah blog masih diperlukan file javascript dan seiring perkembangan otak manusia untuk membuat sesuatu agar lebih mudah, penggunaan javascript tersebut kini sudah ditiadakan untuk efek-efek minimalis, salah satunya Efek Button Tiga Dimensi yang akan saya jelaskan berikut ini. Atau jika tertarik untuk membuat efek tiga dimensi lainnya dari blog ini, silahkan baca Teks 3 Dimensi

Dan berikut cara membuat efek button 3D, kode ini dibuat sesederhana mungkin dan tidak perlu repot-repot dalam memasangnya ke dalam template blog

CSS

.btn3D {
 display: block;
 border: 1px solid;
 border-color: #aaa #000 #000 #aaa;
 width: 8em;
 background: #fc0;
}

.btn3D:hover {
 position: relative;
 top: 1px;
 left: 1px;
 border-color: #000 #aaa #aaa #000;
}

HTML
<a class="btn3D" href="http://panduantemplateblog.com/jual-ebook-bisnis-online">Jual Ebook Bisnis Online</a>

Real DEMO
Jual Ebook Bisnis Online

Ingin membuatnya lebih menarik? Silahkan kembangkan kreartifitas Anda, terimakasih telah membaca artikel ini, Kode CSS: Membuat Efek Button 3D Sederhana

3 komentar:

Direktori Indonesia23 November 2013 pukul 01.54
Keren banget 3D buttonnya, mas.
Makasih sharingnya dan salam kenal sekalian mengundang untuk submit URL Blog bagusnya dalam rangka launchingnya Direktori Blogger Indonesia terbaru :)
Salam sukses selalu.
BalasHapus
Balasan
Unknown27 Januari 2014 pukul 22.59
mantep
BalasHapus
Balasan