Halo teman-teman, pada kesempatan kali ini saya akan membuat efek 3D push button dengan CSS. Caranya cukup sederhana dengan menggunakan efek :hover pada link yang kita buat. Oke kita langsung saja.
- Buka text editor teman-teman (notepad++, sublime text, dll).
- Mulai ketikkan baris HTML dan CSS dibawah ini.
<style>
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #ff0000;
text-decoration:none;
padding:10px;
color:#fff;
text-align:center;
}
</style>
<a href=””>Klik Disini</a>
Â
- Kemudian kita tambahkan efek CSS pada hovernya dengan menambahkan selector a:hover seperti dibawah ini.
<style>
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #ff0000;
text-decoration:none;
padding:10px;
color:#fff;
text-align:center;
Â
}
Â
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
</style>
<a href=””>Klik Disini</a>
- Kemudian save dengan nama button.html dan jalankan pada browser.