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.

  1. Buka text editor teman-teman (notepad++, sublime text, dll).
  2. 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>

 

  1. 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>

 

  1. Kemudian save dengan nama button.html dan jalankan pada browser.