Tạo Button Sôcôla (Chocolate) với css3

Button là nút bấm, bạn có thể tìm thấy nó ở mọi thứ trong cuộc sống, chẳng hạn như cái nút trong bàn phím của bạn.

Còn button trong blogspot cũng là nút bấm nhưng dùng để khi ta nhấp chuột vào nó thì ta được đưa đến một địa chỉ nào đó do người chủ trang blog cài đặt.

Button Sôcôla ở đây có màu sắc của socola với hiệu ứng đỏ bóng và shadow rất đẹp mắt.
Phần code CSS bạn đặt trước thẻ ]]></b:skin> trong mẫu


Kiểu 1
DEMO


CSS:

.chocof {
  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:150px;
  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;
}

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

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

HTML

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

Khi sử dụng dùng doạn code sau

<a class="chocof" href="LINH CẦN ĐẾN"target="blank">TÊN</a>

Kiểu 2
DEMO

Chocolate Chocolate

Chocolate Chocolate

CSS

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

Khi sử dụng dùng doạn code sau

<a class="choco" href="LINH CẦN ĐẾN"target="blank">TÊN</a>