Mecha versi 2.6.3 sudah dirilis!

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 :)

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

Komentar telah ditutup.