Badge là một trong thành phần gần như không thể thiếu trong bất kỳ một Website thiết kế theo phong cách 2.0 nào. Cho dù kích thước của nó có to hay nhỏ nhưng chúng đều tạo ra một phong cách khá riêng biệt. Có rất nhiều các loại badge được thiết kế theo các hình dạng khác nhau, nhưng chúng đều mang một phong cách hiện đại rất đặc trưng cho Web 2.0.
Trong bài viết ngày hôm nay mình xin chia sẻ cho các bạn một mẫu Badges rất đẹp và có hiệu ứng cực kỳ ấn tượng với chỉ bằng CSS thuần.
HTML
Đầu tiên chúng ta cần có khung html chuẩn cho các badges như sau :
<div id='wrapper'>
<div class='cool_btn1 green'>
<h1 class='top'>126 <i>Plays</i></h1>
<h2>H</h2>
</div>
<div class='cool_btn1 teal'>
<h1 class='top'>10k <i>Likes</i></h1>
<h2>U</h2>
</div>
<div class='cool_btn1 blue'>
<h1 class='top'>240 <i>Likes</i></h1>
<h2>G</h2>
</div>
<div class='cool_btn1 orange'>
<h1 class='top'>21k <i>Points</i></h1>
<h2>)</h2>
</div>
</div>
CSS
Trước hết chúng ta sẽ định dạng chung cho các badges như sau :
.cool_btn1 {
width: 190px;
height: 190px;
margin: 15px 15px 15px 15px;
position: relative;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
-ms-border-radius: 200px;
-o-border-radius: 200px;
border-radius: 200px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(50%, #e3e3e3), color-stop(50%, #888888), color-stop(100%, #666666));
background-image: -webkit-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
background-image: -moz-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
background-image: -o-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
background-image: linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3);
display: inline-block;
}
.cool_btn1 h1 {
text-align: center;
font-size: 50px;
margin: 20px 0 0 0;
color: #333;
text-shadow: 0 1px 0 white, 0 -1px 0 rgba(0, 0, 0, 0.5);
font-family: 'Lobster', cursive;
font-weight: normal;
line-height: 1;
}
.cool_btn1 h1 i {
display: block;
font-style: normal;
font-size: 14px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
text-shadow: none;
}
.cool_btn1 h2 {
font-family: 'ModernPictogramsNormal', Arial, sans-serif;
font-weight: normal;
text-align: center;
font-size: 90px;
line-height: 1;
margin: 15px 0 0 0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0px rgba(0, 0, 0, 0.8);
color: #fafafa;
}
.cool_btn1:after {
content: "";
width: 200px;
height: 200px;
display: block;
position: absolute;
left: -5px;
top: -5px;
z-index: -1;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
-ms-border-radius: 200px;
-o-border-radius: 200px;
border-radius: 200px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cecece), color-stop(100%, #e7e7e7));
background-image: -webkit-linear-gradient(#cecece, #e7e7e7);
background-image: -moz-linear-gradient(#cecece, #e7e7e7);
background-image: -o-linear-gradient(#cecece, #e7e7e7);
background-image: linear-gradient(#cecece, #e7e7e7);
-webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
}
Và sau đây là hiệu ứng động cho các badges tương ứng theo tên class :
.cool_btn1.blue, .cool_btn1.teal, .cool_btn1.orange, .cool_btn1.green {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
/* -------------------
Colors
-------------------- */
.cool_btn1.blue {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #577fbd), color-stop(100%, #274281));
background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
background-image: linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
}
.cool_btn1.blue h1 {
color: #4265A3;
}
.cool_btn1.blue h2 {
color: #1E3261;
}
.cool_btn1.teal {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #11b8fe), color-stop(100%, #0187b8));
background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
background-image: linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
}
.cool_btn1.teal h1 {
color: #149EDB;
}
.cool_btn1.teal h2 {
color: #0C6186;
}
.cool_btn1.orange {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #f49e23), color-stop(100%, #e27619));
background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
background-image: linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
}
.cool_btn1.orange h1 {
color: #e27619;
}
.cool_btn1.orange h2 {
color: #AC5509;
}
.cool_btn1.green {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #2fd51d), color-stop(100%, #00a01e));
background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
background-image: linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
}
.cool_btn1.green h1 {
color: #00a01e;
}
.cool_btn1.green h2 {
color: #006312;
}
/* -------------------
Hover States
-------------------- */
.cool_btn1.orange:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8);
-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8);
}
.cool_btn1.teal:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8);
-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8);
}
.cool_btn1.blue:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8);
-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8);
}
.cool_btn1.green:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8);
-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8);
}
Chúc mừng các bạn đã có thêm một lựa chọn cho trang web hay blog của mình. Nhớ chia sẻ những mẫu badges này cho bạn bè của mình nhé.