Add Stylish CSS Buttons For Blogger

 

 

Give you some amazing techniques that will you like colored buttons and add some dynamic buttons on the bubble shape using CSS Animations template blogger, was designed by animated buttons Tutorial Zine. Featuring bubble CSS buttons when the mouse hovers over it issued vibrating bubbles and makes this effect is more than wonderful, is available in four colors and three sizes of threads so you can add any button of any size only by just changing the name of the category of a button.

How To Add Stylish CSS Buttons For Blogger

Written explanation
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

]]></b:skin>

3) Now Paste the Code Shown Below just Before it.

a.button-facebook,a.button-googleplus,a.button-linkedin,a.button-pinterest,a.button-rss,a.button-twitter {    -moz-border-radius: 3px;    -webkit-border-radius: 3px;    border-radius: 3px;    box-shadow: 0 1px 1px #999;    color: #fff;    display: inline-block;    font-size: 16px;    margin: 0 20px 20px 0;    padding: 10px 15px;    text-align: center;    width: 130px;    text-decoration:none;}a.button-facebook {    background-color: #2b4170; /* fallback color */    background: -moz-linear-gradient(top, #3b5998, #2b4170);    background: -ms-linear-gradient(top, #3b5998, #2b4170);    background: -webkit-linear-gradient(top, #3b5998, #2b4170);    border: 1px solid #2b4170;    text-shadow: 0 -1px -1px #1f2f52;}a.button-facebook:hover {    background: -moz-linear-gradient(top, #2b4170, #3b5998);    background: -ms-linear-gradient(top, #2b4170, #3b5998);    background: -webkit-linear-gradient(top, #2b4170, #3b5998);}a.button-googleplus {    background-color: #c33219; /* fallback color */    background: -moz-linear-gradient(top, #e64522, #c33219);    background: -ms-linear-gradient(top, #e64522, #c33219);    background: -webkit-linear-gradient(top, #e64522, #c33219);    border: 1px solid #c33219;    text-shadow: 0 -1px -1px #972412;}a.button-googleplus:hover {    background: -moz-linear-gradient(top, #c33219, #e64522);    background: -webkit-linear-gradient(top, #c33219, #e64522);}a.button-linkedin {    background-color: #0073b2; /* fallback color */    background: -moz-linear-gradient(top, #009cda, #0073b2);    background: -webkit-linear-gradient(top, #009cda, #0073b2);    border: 1px solid #0073b2;    text-shadow: 0 -1px -1px #005486;}a.button-linkedin:hover {    background: -moz-linear-gradient(top, #0073b2, #009cda);    background: -ms-linear-gradient(top, #0073b2, #009cda);    background: -webkit-linear-gradient(top, #0073b2, #009cda);}a.button-pinterest {    background-color: #a0171c; /* fallback color */    background: -moz-linear-gradient(top, #cb2027, #a0171c);    background: -ms-linear-gradient(top, #cb2027, #a0171c);    background: -webkit-linear-gradient(top, #cb2027, #a0171c);    border: 1px solid #a0171c;    text-shadow: 0 -1px -1px #761114;}a.button-pinterest:hover {    background: -moz-linear-gradient(top, #a0171c, #cb2027);    background: -ms-linear-gradient(top, #a0171c, #cb2027);    background: -webkit-linear-gradient(top, #a0171c, #cb2027);}a.button-rss {    background-color: #e2733d; /* fallback color */    background: -moz-linear-gradient(top, #e88845, #e2733d);    background: -ms-linear-gradient(top, #e88845, #e2733d);    background: -webkit-linear-gradient(top, #e88845, #e2733d);    border: 1px solid #e2733d;    text-shadow: 0 -1px -1px #9a4824;}a.button-rss:hover {    background: -moz-linear-gradient(top, #e2733d, #e88845);    background: -ms-linear-gradient(top, #e2733d, #e88845);    background: -webkit-linear-gradient(top, #e2733d, #e88845);}a.button-twitter {    background-color: #0081ce; /* fallback color */    background: -moz-linear-gradient(top, #00aced, #0081ce);    background: -ms-linear-gradient(top, #00aced, #0081ce);    background: -webkit-linear-gradient(top, #00aced, #0081ce);    border: 1px solid #0081ce;    text-shadow: 0 -1px -1px #005ea3;}a.button-twitter:hover {    background: -moz-linear-gradient(top, #0081ce, #00aced);    background: -ms-linear-gradient(top, #0081ce, #00aced);    background: -webkit-linear-gradient(top, #0081ce, #00aced);}

Using It in Your Posts

Use any 1 of the codes

Quote:

<a class="button-facebook" href="#">Cool World</a></div>

Quote:

<a class="button-googleplus" href="#">Cool World</a></div>

Quote:

<a class="button-twitter" href="#">Cool World</a></div>

Quote:

<a class="button-linkedin" href="#">Cool World</a></div>

Quote:

<a class="button-rss" href="#">Cool World</a></div>

Quote:

<a class="button-pinterest" href="#">Cool World</a></div>

Customize 

Replace Cool World with your own text. 

Change # to the desired link.