How To Add Ripple Animation Material Buttons In Blogger

As we all know now that Material design has become a trend as a web interface or you can say UI (user interface). It's style is popular in both variations of webpage i.e Mobile device or desktop web page. Material design has a very good appearance and attractive features. If you are using Material design UI then i'm sure your it has enhanced your blog or website.

DEMO

See the Pen Ripple Effect Material Design Demo and Download Button by BloggersStand (@bloggersstand) on CodePen.

Today we are going to share Demo and Download Buttons Of Material Design with Ripple animation effects.Ripple animations effects means when we press the button waves effect comes out which is the one of the features of Material design.Follow the below Instructions to get these buttons on your blog or website.

How To Create Ripple Effect Demo and Download Buttons in Blogger

Installation Steps:

Step #1. Go to your blogger account and click on template then edit template then template editor.

Step #2. Copy the below CSS code and Paste it just above/before of ]]></b:skin>or</style>

/* Bloggersstand Material Design Ripple Effect Buttons */
#btnripplebsd{margin:19px auto;text-align:center}
#btnripplebsd a{text-decoration:none}
.bsdripplebtn{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.6em;border-radius:4px;color:rgba(255,255,255,0.7);font-weight:400;padding:19px 24px;margin:0 14px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.bsdripplebtn:hover,.bsdripplebtn:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.bsdripplebtn.btnone{background:#33ccff}
.bsdripplebtn.btntwo{background:#ff3333}
.bsdripplebtn.btnone:hover,.bsdripplebtn.btnone:active{background:#4dd2ff}
.bsdripplebtn.btntwo:hover,.bsdripplebtn.btntwo:active{background:#ff4d4d}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.06)}
.ripple-effect-bsd{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.bsdeffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.4}
.bsdeffect.animate{animation:ripple-effect-bsd 0.4s linear}
@keyframes ripple-effect-bsd{100%{opacity:0;transform:scale(2.4)}}
@-webkit-keyframes ripple-effect-bsd{100%{opacity:0;transform:scale(2.4)}}

Step #3. Now Copy the below jquery code and paste it just before </body>

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect-bsd").click(function(b){var c=a(this);0===c.find(".bsdeffect").length&&c.append("<span class='bsdeffect'></span>");var d=c.find(".bsdeffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

Adding jquery will bring the Ripple animation effects on the button.

Now Save the template.

How to Add The Material Design Ripple Animation Buttons in Template 

To add the button in the post , just copy the below HTML code and paste it anywhere in your post.

<div id="btnripplebsd">
  <a class="bsdripplebtn btnone ripple-effect-bsd" href="#" rel="nofollow" target="_blank">DEMO</a>
  <a class="bsdripplebtn btntwo ripple-effect-bsd" href="#" rel="nofollow" target="_blank">DOWNLOAD</a>
</div>

Replace The Highlighted # with your link.
You Are Done!