Membuat Tombol 3D Sederhana Dengan Atribut Box Shadow

Membuat Tombol 3D Sederhana
Dalam pembuatan sebuah website atau blog, pasti tidak terlepas dari tombol-tombol untuk berbagai fungsi dan tentunya juga dapat menghiasi tampilan blog itu sendiri.

Banyak cara dalam membuat sebuah tombol, mulai dari menggunakan gambar sampai dengan menggunakan CSS. Namun agar tidak terlalu membebani loading blog, sangat dianjurkan untuk membuat tombol dengan menggunakan CSS ketimbang dengan gambar.

Karena sekarang zamannya CSS3, maka dalam pembuatan elemen-elemen blog dalam hal ini membuat tombol atau button alangkah baiknya juga memperhatikan validasi CSS3-nya.

Nah kali ini saya akan mencoba membuat sebuah tombol atau button dengan CSS. Dengan memanfaatkan atribut box-shadow kita akan membuat tombol menjadi terlihat 3 dimensi. Ditambah dengan penambahan gradasi warna dan atribut position relative, maka tombol ini semakin terlihat dan terasa sebagai tombol 3 dimensi yang nyata. Ketika kita menekan tombol dengan klik mouse, maka kita akan merasakan seperti menekan tombol yang sesungguhnya.

button


Sebagai contoh adalah tombol di atas tersebut, silahkan coba tekan tombol di atas tersebut untuk melihat efeknya. Menarik bukan?

Kita membuat 3 buah susunan kode CSS untuk membuat tombol seperti di atas yaitu tampilan ketika diam, ketika tombol dihover kursor, dan ketika ditekan atau di klik.

CSS ketika tombol diam

.ButtonOK {
 box-shadow: 3px 4px 0px 0px #1564ad; 
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:12px 44px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}

Perhatikan pada box-shadow di atas, terdapat penekanan untuk x dan y dengan tidak memberikan efek blur dan spread untuk mendapatkan efek 3 dimensinya. Begitu pun dengan warna gradasi pada backgroundnya untuk lebih menghidupkan tombolnya.

CSS ketika tombol dihover atau disentuh

.ButtonOK:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}

Di sini kita hanya membalikan warna gradasi-nya pada background-nya agar terlihat perubahannya ketika dihover kursor.

CSS ketika tombol ditekan atau diklik

.ButtonOK:active {
    box-shadow: 1px 1px 0px 0px #1564ad;
position:relative;
top:1px;
    left:1px;
}

Di sini kita mengurangi ketinggian x dan y pada box-shadownya dan menggunakan position:relative dengan menambahkan margin atas dan kiri sebanyak 1px agar ketika tombol diaktifkan menjadi bergeser ke kanan dan ke bawah sebanyak 1px.

Untuk menggunakan tombol ini kita hanya menggunakan penganggilnya sesuai class yang dibuat seperti ini.

<div class="ButtonOK">button</div>

Bagaimana? Mudah bukan? Silahkan coba sendiri dengan merubah warna gradasinya agar cocok dengan tema blog Anda.


Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments