Customize Demo Download Bouncing Buttons For Bloggers

0 /

Also Read

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 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 */
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-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 */


  • To change the button color,replace #f6b26b  with your hex color 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='//' 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="" 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



Post a comment Blogger Disqus

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

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.
Team Bloggersstand