How To Add Ripple Animation Material Buttons In Blogger

How To Add Ripple Animation Material Buttons In Blogger

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.

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>
/* SayemTutorial 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>
Previous Post
Next Post

post written by:

I am a web designer and developer. Sharing knowledge is my passion and web designing is my interest but it is not bigger than my interest in Islam.

0 Comments: