How To Add Ripple Animation Material Buttons In Blogger

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

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! 
Tutorial for adding ripple animation in blogger/blogspot custom template.Add Demo and download button with ripply material design effect in blogger website.
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 ...
SUMMARY

Tutorial for adding ripple animation in blogger/blogspot custom template.Add Demo and download button with ripply material design effect in blogger website.

KEEP ON READING...

We hope this article helped you to learn How To Add Ripple Animation Material Buttons In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Ripple Animation Material Buttons In Blogger" So Far - Post Yours!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
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.
Regards:
Team Bloggersstand