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:
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
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
.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>
Không có nhận xét nào :
Đăng nhận xét
Bạn có thể sử dụng biểu cảm yahoo