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 ... -
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.
- Add Pop Up Email Subscription Form For Blogger
- Metro Style Social Icons for Blogger
- Add Related Posts Widget To Blogger
- Add "Link To This Post" Widget Below Every Post In Blogger
- Add Facebook Like Box
- Add Facebook Like Box Widget With Hover Button Effect For Blogger
- Add Floating Social Media
- Add Modern Scroll Top & Bottom Button With Auto Scroll Down For Blogger
- add vertical side menu for blogger
- Add Vertical Floating Social Sharing Bar For Blogger
- Add New Breaking News Widget for Blogger
- Add Stylish Social Sharing Widget With Hover Effect For Blogger
Logging you in...
jo asha · 295 weeks ago
Tableau Online taining