Tombol 3 dimensi

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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Tombol 3 Dimensi Dengan CSS
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

19 komentar

  1. Sangat bermanfaat sekali mbak tutor nya..bg pemula seperti saya yg inin bljar css.terimakasih mbak :)

    BalasHapus
  2. semakin sering kemari kode scrip yang saya pelajari makin banyak, lama kelamaan saya jadi saingan mbak Devy nanti ini :D
    thanks mbak ilmunya :))

    BalasHapus
  3. kalau dipasang di blog bisa bikin keren, bisa warna-warni lagi, tutorial mantap2 blog ini, kunjungan perdana

    BalasHapus
  4. Bagus juga ya kalau kita set tombol itu tiga dimensi.,.


    coba ahhh....
    makasi sis

    BalasHapus
  5. "tetapi kalau mau navdar blognya dibuang aja biar semakin seeip dech" kalimat yang ini belom ngerti mbak =)) Kalo nggak kberatan sih, minta elmunya yah :D

    BalasHapus
  6. Menarik dan dynamis tombol 3 dimensinya Mbak Devy, saya coba yah
    Terima kasih sudah berbagi yang indah buat di blog, salam sukses Mbak :)

    BalasHapus
  7. waduh kodenya panjang sekali.... saya mau coba praktekan ya.

    BalasHapus
  8. saya lihat demonya...keren sekali mbak..
    kadenya banyak sekali ya [-(

    BalasHapus
  9. Wah,,, asik ne kayaknya buat dicoba....
    salam kenal ya...
    dari http://masphatar.blogspot.com

    BalasHapus
  10. perlu di coba nih di blog ane

    BalasHapus
  11. Sederhana tapi sangat menarik, boleh deh kapan-kapan saya coba tombol 3Dnya:)

    BalasHapus
  12. keren mba Devi :D, biasanya saya buatnya pke photoshop, ternyata dengan css juga bisa, saya jadi pengen nyoba, :D

    BalasHapus
  13. wah,.. keren banget bos, ijin copy code dan mempraktekannya yia bos....

    BalasHapus
  14. kereeen abisss ... apa apa bs pk css (y)

    BalasHapus
  15. Menarik infonya Mbak, kebetulan saya masih awam soal begini. Salam :)

    BalasHapus
  16. tampilan blog mu bagus,... pake template apa ya? trus kalo template bawaan blogger dapat di modif seperti mbak punya ka?

    BalasHapus
    Balasan
    1. Pada dasarnya semua Template itu sama mas, yang berbeda adalah versi perkembangan template dalam membaca struktur scrupt yang ada dalam bahasa HTML.

      default blogger template umumnya versi-1 HTML, artinya disana tidak terpasang atau belum menggunakan script-jQuery, kalau mau diubah ketampilan seperti Template blog ini, bisa saja, hanya kita harus mengganti semua elemen HTML dalam Template,

      namun dalam versi sama saja, klau tampilan bisa kita ubah.

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK