Membuat Tombol 3 Dimensi Dengan CSS

Membuat Tombol 3 Dimensi Dengan CSS - Banyak yang dapat kita hasilkan dengan CSS, seperti pertemuan kali ini saya akan sedikit memberikan tips sederhana bagaimana membuat tombol klik yang sering kita lihat pada aplikasi-aplikasi yang berbasis " DOWNLOAD " yang mana kata download tersebut dibalut dengan border sehingga membentuk layaknya sebuah box yang kita kenal sebagai tombol.
Mungkin sudah banyak yang mengetahui cara membuatnya, tetapi  disini saya hanya sedikit merubah kodenya, dengan menambahkan kode CSS (box-shadow, border-radius dan text-shadow) sehingga tampilan tombol akan terkesan nyata saat di klik dengan efek 3 dimensi.

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#479ECD;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
}

<div style="-webkit-border-radius:23px;background:#fafafa;padding:10px;border:1.5px solid purple;border-radius:23px;overflow:auto;margin:0 45%;width:95px;-moz-border-radius:23px";>TOMBOL</div>

Kedua kode diatas sama untuk membuat sisi border pada sebuah kata/text, cukup memberi link pada kata tersebut maka tombol telah tercipta, tetapi kesannya default kurang berkesan dan efek belum tercipta. Untuk memanggil efeknya, kita abaikan border pada sisinya, kita fokus pada link (a:hover a:active), selanjutnya coba kita tambahkan CSS shadow, seperti ini

CSS

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#6aa84f;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #297EB9;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #274e13,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #274e13,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #274e13,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #274e13,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #274e13,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #274e13,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #274e13,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #274e13,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #274e13,
    0px 3px 3px rgba(0,0,0,0.4);
}

DEMO SHOW

Penerapan Pada MODE HTML

<a class='button3' href='URL anda'>Tombol Suka-Suka</a>

Jika ingin mengubah tampilannya, cukup edit nilai value pada TEXT SHADOW. BORDER RADIUS. BOX SHADOW