Custom Bouncing Button for Blogger Site

Custom Bouncing Button for Blogger Site


bouncing button

For various purpose we use button in Blogger template Such as Live Demo, Download, Read More etc. Making an stylish button can bring some variation in your Blog design and your Blog readers can become loyal by watching different style. I have already share different Demo and download button style by using CSS but today In this article I will show you the way of adding Bouncing Live Demo or Download button in your Blogger posts by using webkit key frames. We can easily change scrollbar color by using webkit keyframe which is not possible by using CSS coding directly. 

Live Demo

This is pretty cool. Because Bouncing button will get an extra effect by the magic touch of CSS. In addition after mouse hover added extra Font Awesome icon. I hope this unique button you would love. For integrating bouncing button just follow the below steps-

animated button

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3
 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

/* Custom Button by */
a.rabbi-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.rabbi-button:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.rabbi-butt:active {background:#06A3ED;top:2px;}
a.rabbi-butt span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.rabbi-butt:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.rabbi-butt:active:before {color:#fff;}
a.rabbi-buttlater:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.rabbi-buttlater:before {left:0;top:-110%;}
a.rabbi-buttlater:hover:before {top:0;padding-left:40%;text-decoration:none;}
a.rabbi-butticon:before {content: "\f135";}
@-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)}}


  • To change the Button color please alter #06A3ED code. You can choose different color by using our Color Picker.
  • To change the Font Awesome Icon please alter f135 code. You can select different Font awesome icons from Font Awesome cheat sheet.
Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 6 Copy the script from below and Paste it above/before </head> 
<link href='//' rel='stylesheet'/>

Step 7 hit the Save template button.

How to Make it work?

For using this Custom button you have to add the code in HTML view while writing a Blog post. Just write a post and from Post Editor Select HTML mode. Now add the below code-

<a href="" rel="”nofollow”" target="_blank" class="rabbi-button rabbi-butt rabbi-buttlater rabbi-butticon"><span>Live Demo</span></a>

Now simply publish the post and see the result. You will see Live Demo button is jumping. It has got an webkit keyframes animation. Thank you. 

Post a Comment

Awesome Tricks. Ready for that. Thanks bro :)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *