Design Your Labels Widget With Beautiful Animated 3D Like Buttons

Labels is a default widgets in our blog, it is put by bloggers to showcase the post by tags and categories, but it lacks on somewhat design and it is very simple so now we will design our labels like 3D buttons which will be looking attractive more than the default style. CSS3 Gradients and Box-Shadow properties are also used to give more stylish and puppy look to blogger labels. Default blogger comes with strange design they don’t look beautiful. You can customize your Label widget by adding some CSS3 codes.

I hope you will like this. It has animated hovering effect and it will not get more space from your sidebar.

Add it to blogger

1. Go To Blogger Dashboard-> Your blog-> Layout-> Add a Gadget -> Labels.
2. Now make the settings which are shown in the screenshot below.

3. Select the Cloud from the labels display setting.
4. Uncheck the Show number of post per label.
5. save it by pressing orange button.

If you already installed this widgets

Design 1

1. Go to template editor-> EDIT HTML: (Make a template backup before editing)
2. Find the following code in your HTML.

]]</b:skin>

3. Paste the following CSS code before/above that line:

   .Label a{  background: rgb(0,100,180);      
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);       
background:
 -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));  
     
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);       
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );       
display:inline-block;border:
 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; 
line-height:28px; text-transform:capitalize; 
text-decoration:none;float:left;margin-top:5px; 
font-size:14px;-webkit-transition:all .4s 
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s 
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s 
ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);       
}
.Label a:hover{color:#000 !important; background:#123d60;}

4. Preview, you should see the button appear under sidebar widget.
5. Click Save if you like what you see.

Design 2

1. Go to template editor-> EDIT HTML:
2. Find the following code in your HTML.
]]></b:skin>

3. Paste the following CSS code before/above that line:

   .Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow:
 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s 
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s 
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s 
ease-in-out;}
.Label a:hover{background-color:#303030;}

4. Preview, you should see the button appear under sidebar widget.
5. Now save your template And check your blog.

Troubleshooting

1. You can Change active background color with your color. Simply replace the “background-color” code highlighted in yellow with your own color code. check out our color code picker tool

2. You can also change hovering background color by changing background color highlighted in red color.
3. You can change animation speed by changing the duration (in seconds) in CSS .4s to .5s or .6s or any value which one you like.

I hope you can enjoy this and please drop a comment.