Membuat Tombol 3D Sederhana Dengan Atribut Box Shadow

Membuat Tombol 3D Sederhana Dengan Atribut Box Shadow

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

Cara membuat tombol 2D Sederhana namun
Cukup dynamis dan simpel yah Kang Adhy :-bd

Balas

Asyik dapat subsidi Pertamax nih. ohh yah maaf Kang Adhy
3D Maksud comments di atas bukan 2D Keceplosan deh =D

Balas

Tombol 3Dnya cukup keren mas, mas Ady emang sangat kreatif

Balas

Hehehehe silahkan diambil subsidinya kang |o|

Balas

Makasih mas Fian ^_^

Balas

Jadi lebih profesional fombolnya ya kang
makasih ya kang

Balas

udah siap diterapkan diblog saya mas heheheh :)

Balas

blog pun akan terlihat lebih eksekutif jika menggunakan tombol ini
thanks mas

Balas

keren nich mas Adhy, bisa digunakan sebagai tombol download ya :D
makasih sharingnya :)

Balas

Sama-sama bang Ronny :)

Balas

Siippp sudah saya lacak hehehe yang di Tutornesia ya :-bd

Balas

Betul mas, menjadi lebih siipp hehehehe :D

Balas

Betul mbak, tapi sebenarnya bisa untuk apa saja yang memerlukan tombol ;)

Balas

Wah .. keren mas Adhy .. tombolnya jadi mendut2... :D

Balas

Cocok nih buat link download =D

Balas

Simpel tapi keren mas Adhy, boleh donk ditularkan ilmu cssnya mas hahah

Balas

mas selain kode "linear-gradient" untuk gradasi warna ada ngak? soalnya kode ini diversi mobile (beberapa) ngak kebaca dan yang muncul hanya 1 warna.

Balas

Sama-sama mas :)

Balas

:-bd nah yang ini bagus terlihat lebih hidup, kalo yang punya saya pas di tekan malah bordernya yang jd diatas @@,
simpan dulu mas buat bahan, trims.

Balas

Benul kang, biar lebih atraktif downloadnya. :D

Balas

Hehehehe... hanya belajar mas... :)

Balas

Sebenarnya agar aman di semua browser mesti menggunakan kode -webkit, -moz-linear, -webkit, -o-linear, dan -ms-linear, namun sayang error pada validasi css3. Mudah2an nantinya semua browser telah mendukung css3.

Balas

Mungkin susunan css-nya masih ada yang kurang pas sis :) terus aja coba perbaiki :)

Balas

iya mas nanti saya coba, trims :)

Balas

Buat tombol demo juga boleh nih kang, mantep deh buat torialnya.. :-bd

Balas

Mantab banget mas.. Ntar kl udah di pc dan sinyal bagus, saya coba praktekin mas :D thx tutorialnya..

Balas

lama saya gak kesini kang ... kamari absen ke mana atuh ??? hehe
cucok yeuh kanggo demo and download button kang .. cik ah saya cobian kang

Balas

Tutorial yg sangat bermamfaat buat saya yg baru belajar ngeblog ini :)
thx kang :-d

Follow sukses

Balas

Bisa untuk tombol download juga dong ya mas? :D

Balas

Iya bisa buat tombol download juga :)

Balas

Silahkan dicoba mas Hari :)

Balas

Biasa we kang rada sibuk usrip hehehehe :D

Balas

Sama-sama mas :)

Balas

Wah Asik juga Buat tombol Download..

Balas

Iya mas Nazar bisa buat tombol Download :)

Balas

Hehehe iya mas jadi mendut-mendut tombolnya =D

Balas

ternyata mudah ya kang, cukup dipoles dengan CSS3 dijamin maknyos kaya tahu jeletot :D hehe

Balas

ijin dipelajari dulu nih kang adhy :D tombolnya bagus ada efeknya gitu .. keren

Balas

sudah diterapkan mas, trims :)

Balas

cara naruhnya gimana mas adhy???
mohon pencerahannya :(

Balas

keren om, bisa buat bahan oprek oprek blog ane... :D

Balas

saya pasang tombol 3d di header tersembunyi mirip dengan "More Menu" tapi ngga valid HTML5 error di ...class="ButtonOK" kode yang ini > diganti pake > ngga bisa juga...gimana kang?

Balas

mas adhy caranya masang tombol css nya gmna ya mas adhy tolong pencerahannya , tolong balas di email ya mas mohammadrafii480@gmail.com

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×