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

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


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>
Nhận xét

Không có nhận xét nào :