6 button CSS3 với hiệu ứng đổi màu khi rê chuột đến

Bài viết này mình sẽ hướng dẫn cách thêm button CSS3 nhìn rất đẹp mắt dành cho blog và có hiệu ứng đổi màu khi rê chuột đến. Button này hoàn toàn không sử dụng hình ảnh làm nền vì thế tốc độ load được cải thiện đáng kể và bạn có thể chèn vào bất cứ đâu trong bài viết mà bạn muốn

Live Demo

Làm cách nào để thêm button vào blog?

Bước 1: Vào Blogger > Chỉnh sửa HTML
Bước 2: Dán một trong số, hoặc tất cả code bên dưới vào trước thẻ </head>

• Button Màu Trắng

<style type="text/css">
.whitebtvl {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #5e00ff;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.whitebtvl:hover {
background-color:#dfdfdf;
}.whitebtvl:active {
position:relative;
top:1px;
}
</style>

• Button Màu Đỏ

<style type="text/css">
.redbtvl {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background-color:#fe1a00;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;
}.redbtvl:hover {
background-color:#ce0100;
}.redbtvl:active {
position:relative;
top:1px;
}
</style>

• Button Màu Hồng

<style type="text/css">
.purplebtvl {
-moz-box-shadow:inset 0px 1px 0px 0px #f4cafc;
-webkit-box-shadow:inset 0px 1px 0px 0px #f4cafc;
box-shadow:inset 0px 1px 0px 0px #f4cafc;
background-color:#eea1fc;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dd5df4;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b63dcc;
}.purplebtvl:hover {
background-color:#d441ee;
}.purplebtvl:active {
position:relative;
top:1px;
}
</style>

• Button Màu Xanh

<style type="text/css">
.bluebtvl {
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background-color:#63b8ee;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3866a3;
display:inline-block;
color:#14396a;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #7cacde;
}.bluebtvl:hover {
background-color:#468ccf;
}.bluebtvl:active {
position:relative;
top:1px;
}
</style>

• Button Màu Xanh Lá Cây

<style type="text/css">
.greenbtvl {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
box-shadow:inset 0px 1px 0px 0px #caefab;
background-color:#77d42a;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #268a16;
display:inline-block;
color:#306108;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #aade7c;
}.greenbtvl:hover {
background-color:#5cb811;
}.greenbtvl:active {
position:relative;
top:1px;
}
</style>

• Button Màu Da Cam

<style type="text/css">
.orangebtvl {
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background-color:#ffc477;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #cc9f52;
}.orangebtvl:hover {
background-color:#fb9e25;
}.orangebtvl:active {
position:relative;
top:1px;
}
</style>

Làm Cách Nào Để Thêm Button Vào Bài Viết?

Bạn thêm code bên dưới vào vị trí bạn muốn thêm button trong bài viết

<a href="#" class="orangebtvl">Button</a>

Thay orangebtvl thành các giá trị khác như redbtvl , purplebtvl , bluebtvl , greenbtvl, orangebtvl để được màu button tương ứng