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.

Demo

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.