Buttons and others effects are very important in blogging and specially when our blog related with designing and blogging blog that's why looks and feels are very important in the blog. From lasts post our team provided the buttons for live demo and for other stuffs like icons and other some stuff and so today we have a 3D Push-Pop button we can add in the blogger post and it's very unique kind of widget and it have a 3D look and easily customizable and has a Push - Pop effect when you click on the button.
Add Push-Pop Button in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML > Proceed > Expand Widget Templates
- Press Ctrl + F and search the code shown below.
</head>
- Paste below code before </head>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>
- Now again find below code
]]></b:skin>
- Paste below code before ]]></b:skin>
#wg-pushbutn a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#wg-pushbutn a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
- Save Your Template.
How to Add it in Post....?
- Go to posting area > HTML
- Now paste code in it.
<div id="wg-pushbutn"><a href="#" target="_blank">Live Demo</a></div>
Make Changes...!
- Replace # it with your link.
- Replace Live Demo it with your own text.
cool button brother..try to view our guest post..
ReplyDeleteWhat Are WordPress Frameworks?
@Sheikh ArsLan AfzaLI'm Sorry that link was not complete, but now it fixed.
ReplyDeleteCheck it now. Thanks for telling me my mistake.
Its not working in my blog..please help
ReplyDelete@Ankitwht prblm r u facing?
ReplyDeleteReally, I am impressed from this post. The person who create this post is truly great. Thanks for sharing this with us. I found this informative and interesting blog so I think its very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article.
ReplyDeleteBest regards,
Luciana McCarville
rock indé