Style your Labels with Some CSS and Hover Effect

This is a different type of CSS label style which any one can apply on his blog.This label style is good looking and has hover effect on it. This label look good and on click they display there shadows. Having some different things on our blog is necessary. This is one of them. So have this awesome looking buttons to your blog.

Follow The Below Steps:

1. Login to your Dashboard.
2. Go to Templates--->Edit Html.
3. Find for ]]</b:skin>
4. Paste the below code above/before it.

.list-label-widget-content ul
{
    list-style-type:none;
    padding-left:0px !important;
    display:inline-block !important;
}
.list-label-widget-content li {
    display:inline-block;
 }
/*Code by blog-toolz.blogspot.com*/
.list-label-widget-content li a  {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background:
#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0
#fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background:
#f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
border: solid 1px
#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
}/*Code by blog-toolz.blogspot.com*/
.list-label-widget-content li a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px
rgba(0,0,0,0.15);
}

Now,Click on Save the Template.

Note:After this you should add labels widget to bloggger and should untick "Show number of Post".


It's Done.

Categories: CSS , Label Style