CSS3 buttons for blogger

CSS (cascading style sheet) is a great way to design web graphics, layout design, animation, transition, font styling and even every HTML element within website. Unlike, other web graphics Buttons are the most important element that style your website and create great visual effect. CSS buttons are far functional than simple image buttons because you can style your CSS button with hover and gradient effect and also apply animation and transitions to make it more fascina
ting. The one great feature of CSS styling is the fast loading of CSS graphics and navigation. You can generate CSS and CSS3 buttons from online CSS button generators and link them with HTML to use in your website.   In this post we will present 5 professional CSS3 buttons that you can use in your website/blog. These buttons are pure CSS3 that you can use in your blog for external and internal links, demo and download purposes etc.

Demo of CSS3 buttons

How to add CSS3 buttons in blogger

1) Log in to your blogger dashboard.
2) Click on template >> backup your template and click Edit template. In new blogger HTML editor expand <b:skin> section

and add the below code above </b:skin>.
Note:- if you want to add only two or three buttons then kindly select your choice among five CSS3 buttons. I have made green, blue, red, yellow and purple button classes. .BC and .BC a must be included in all cases whether you choose five or only one button. For example, if you want to add green and red button in your blog then copy .BC and .BC a with green and red buttons code highlighted below with  color.

.BC{
background: rgba(0, 0, 0, .08); display: inline-block;

}

.BC a{
background-color:#3bb3e0;padding:10px;position:relative;font-family: 'Trebuchet MS', sans-serif;;font-size:13px;text-decoration:none;display: inline-block;
color:#fff;-webkit-box-shadow: inset 0px 1px 0px rgb(145, 34, 233), 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px rgb(166, 116, 255), 0px 1px 0px #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;
}

.BC a.green{
border: solid 1px rgb(29, 150, 49);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
background: -moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color: #77d42a;
}

.BC a.green:active {
padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');background-color:#5cb811;
}

.BC a.red{
background-color: rgb(230, 12, 12);
border: solid 1px rgb(119, 23, 23);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background: -moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color: #fe1a00;

}

.BC a.red:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}

.BC a.yellow{
border: solid 1px rgb(137, 146, 29);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
background: -moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
background-color: #f6b33d;
}

.BC a.yellow:active{
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
background-color:#d29105;
}

.BC a.purple{
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c123de), color-stop(1, #a20dbd) );
background: -moz-linear-gradient( center top, #c123de 5%, #a20dbd 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c123de', endColorstr='#a20dbd');
background-color: #c123de;
}

.BC a.purple:active{
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a20dbd), color-stop(1, #c123de) );
background:-moz-linear-gradient( center top, #a20dbd 5%, #c123de 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a20dbd', endColorstr='#c123de');
background-color:#a20dbd;
}

.BC a.blue{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
background-color:#3d94f6;
}

.BC a.blue:active{
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
background-color:#1e62d0;
}

HTML code to implement CSS

Below are the HTML codes for five buttons.
1) HTML code for green CSS3 button. If you want to add green button paste the below code where you want to put in your post html editor.

<span class="BC"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

2) HTML code for red CSS3 button. If you want to add red button paste the below code where you want to put in your post html editor.

<span class="BC"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

3)  HTML code for yellow CSS3 button. If you want to add yellow button paste the below code where you want to put in your post html editor.

<span class="BC"><a class="yellow" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

4)   HTML code for purple CSS3 button. If you want to add purple button paste the below code where you want to put in your post html editor.

<span class="BC"><a class="purple" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

5) HTML code for blue CSS3 button. If you want to add blue button paste the below code where you want to put in your post html editor.

<span class="BC"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Replace # with your link and
Replace Button Text with your text.
Successfully completed!

If you like this post comment, share and subscribe. If you have any problem with these buttons kindly Let me know in comment section.