How to Add Demo Result Button with Vibration Effect

Sourav

Hello today i'll show how to add stylist vibrating demo button for blogger. Demo button is used in blogger to link a demo of any page.

Just follow the steps to add demo button:

1. Blogger > Template > Edit HTML >

Now add the CSS code before ]]></b:skin> or </style>

CSSa.icon-result:before {content: "\f061";}
@-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)}}

Now save it you have done now you need HTML code and post where you want to show it.

Now go to Write Post > HTML > add bellow code there

HTML
<div id="wrap"><a href="http://sn3design.blogspot.com/2015/06/result-button.html" class="sn-btn sn-button icon-result" rel=&#8221;nofollow&#8221; target="_blank"><span>Result</span></a></div>

Finally you have done it and you will see like this demo button .

Result

SN Design

How to Add Demo Result Button with Vibration Effect

Sourav

Related Article