CSS3 Chocolate Button

Tabel Konten
  1. CSS 
  2. HTML 
  3. Demo 
CSS3 Chocolate Button

CSS 

/* Chocolate Button */

.choco {
  outline:none;
  cursor:pointer;
  display:inline-block;
  background-color:#54341A;
  text-shadow:0px 1px 0px rgba(255,255,255,0.1);
  text-decoration:none;
  font:normal 20px 'Monotype Corsiva','Book Antiqua',Georgia,Serif;
  color:#170D05;
  width:120px;
  text-align:center;
  margin:2px;
  padding:0px 0px;
  line-height:40px;
  border-top:9px solid #6A4021;
  border-right:10px solid #39210D;
  border-bottom:10px solid #241505;
  border-left:10px solid #402712;
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
    0px 1px 2px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
    0px 1px 2px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.15),
    0px 1px 2px black;
}

.choco:hover {
  background-color:#4B2E17;
  border-color:#5F391F #311F0D #170D03 #341F0F;
}

.choco:active {
  border-color:#170D03 #341F0F #5F391F #311F0D;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

HTML 

<button class="choco">Chocolate</button>

Demo 

Chocolate
Chocolate
Chocolate
Chocolate
Chocolate
Chocolate

9 Komentar

  • Unknown

    Pertamax mas... :D

    ada2 saja tombol coklat, mas bisa di postkan buat bmenu back to top nya gk... hehe

  • Taufik Nurrohman

    @Dadang Herdiana Menu back to top yang model bagaimana lagi ya? Di sini sudah ada dua posting sejenis kok. Kalau modelnya spesifik mungkin bisa :)

  • Miftachudin

    keren,,mksih,,ijin nyoba,,,

  • Andre Pandet Rank Khoerai

    kwkwkw..lucu banget menu nya...rasa nya pengen di comot aja satu menu nya.,buat di cicipin..:D

  • Anonim

    saya boleh tanya gan kode css nya nanti taruh dimana ya kang

  • EM

    Assalamu'alikum.
    Buttonnya keren mas, manis kayak coklat asli,
    mengenai css3, tolong donk dibuatin tutorial yang isinya menjelaskan syntax CSS3, dari yang dasar sampai yang rumit, jadi total gitu mas,
    maaf, kalau saya gak tahu diri,
    barangkali mas Taufik punya referensi buat saya untuk belajar CSS3 secara otodidak?

    Terima kasih.

  • M Rizal

    enak banget serasa pengen makan tuh tombol kwkakwkwakka :D

  • Unknown

    ijin make kang \o/

Komentar telah ditutup.