Welcome to NewEstr here will Find all new widget and template blogger and Latest News seo and facebook ......
Popular Posts
-
Hello to you again in the new topic, and exclusive of the blog newth3, today, we will add a new tool and easy, this tool you view the ... -
Looking for ways to generate money is becoming a very difficult job nowadays. So, many creative entrepreneurs...
-
Without a shadow of a doubt that Strong passwords are the most common way and secure to protect your computer and Accounts online ... -
Are you thinking of a way to send large files to friends. Did you send by e-mail or send via Skype. Well now Pipe application allows... -
If you need to send a text message in a very secret to someone, And afraid that leaking the message to other people, here service to s...
Add Stylish CSS Buttons For Blogger
Saturday, December 14, 2013
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)
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.
abdelali tibicht
name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.
Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.
