Customize Demo Download Bouncing Buttons For Bloggers

0
Customize Demo Download Bouncing Buttons For Bloggers
In this tutorial we are going to explain how to add customize bouncing demo,read more,download buttons in your blog or website.Stylish buttons can bring variation in your blog design.to grab this unique bouncing buttons for blogger just follow the mentioned steps below.

how to add customize bouncing buttons in blogger

installation steps

1.  Go To Blogger > Template > Backup your template
2.  Click Edit HTML
3.  Search for ]]></b:skin>
4.  Paste the following code just above it.
/* Custom Button Starts by www.bloggersstand.com */
a.bloggersstand-button{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s}
a.bloggersstand-button:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.bloggersstand-button:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.bloggersstand-butt{background:#f6b26b;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.bloggersstand-butt:active {background:#FF3333;top:2px;}
a.bloggersstand-butt span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.bloggersstand-butt:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.bloggersstand-butt:active:before {color:#fff;}
a.bloggersstand-buttlater:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.bloggersstand-buttlater:before {left:0;top:-110%;}
a.bloggersstand-buttlater:hover:before {top:0;padding-left:75%;text-decoration:none;}
a.bloggersstand-butticon:before {content: "\f14c";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
/* Custom Button ends by www.bloggersstand.com */

customization:

  • To change the button color,replace #f6b26b  with your hex color value.you can also choose colors from color picker.
  • To change the Font Awesome Icon,replace f14c  with your icons.

5. Search for the  </head>
6. Paste the following code just above it.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
7. save your template..Done !

How to make it works?

For adding the Custom bouncing buttons you have to add the code in HTML view .When you are going to write a  New Blog post from Post Editor Select HTML mode and Add the following Code wherever you want to display your buttons.

<a class="bloggersstand-button bloggersstand-butt bloggersstand-buttlater bloggersstand-butticon" href="www.bloggersstand.com" rel="&#8221;nofollow&#8221;" target="_blank">Download</a>
After adding above code in post,publish your content and see your awesome Download button live.
How to Add Custom live Demo Download Bouncing Buttons For Bloggers,stylish responsive desing buttons for blogspot blog websites,css webkit demo stylish attractive hover effect fontawesome icons buttons for blogger
In this tutorial we are going to explain how to add customize bouncing demo,read more,download b...
SUMMARY

How to Add Custom live Demo Download Bouncing Buttons For Bloggers,stylish responsive desing buttons for blogspot blog websites,css webkit demo stylish attractive hover effect fontawesome icons buttons for blogger

You Might Also Like:

We hope this article helped you to learn Customize Demo Download Bouncing Buttons For Bloggers. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Customize Demo Download Bouncing Buttons For Bloggers" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand