Thủ thuật blogspot - Dautoblog

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.
CSS đặt trước thẻ ]]></b:skin>


/* 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


Khi sử dụng dùng doạn code sau
<a class="choco" href="LINH CẦN ĐẾN"target="blank">TÊN</a>
Comments blogger

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