Create Demo Keys and Material Design Downloads

Creating Demo Keys and Material Design Downloads - As we know, now Material Design has become a trend as a web interface or UI (User Interface) both on mobile and desktop devices on a web page. This web interface is also welcomed by users and website developers because it has a myriad of useful features and a more attractive appearance.
On this occasion Wiendhy will give an example of a demo and download button which is added with the ripple (wave) animation effect when we press the button which is one of the features such as animation effects from Material Design.

Create Demo Keys and Material Design Downloads

First Open Blogger> Click the Edit HTML button> Template Editor> Add CSS below before the code ]]></b:skin> or </style>

/* Arlina Design Material Button */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

For the color of the button and other functions you can readjust

Then add this jQuery code before the code </body>

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");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>

The jQuery code functions to bring up the Ripple effect on the button

then save the template.

Now for the caller code, add the HTML code below in the post on the HTML tab (not compose)

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

Add the destination link to the marked code

Finished! And see the results

See the Pen Button with Ripple Effect by Wiendhy (@wiana) on CodePen.

Not only on the button, the ripple effect above can be added to any tag in the other template markup section. You only need to add ripple-effects in the class in a tag like the example below

See the Pen Examples of Ripple Effects on Certain Tags by Wiendhy (@wiana) on CodePen.

You only need to give CSS tags overflow: hidden and position: relative to the wrap tag

#wrapper{position:relative;overflow:hidden}
#wrapper .child{......}

<div id="wrapper">
  <span class="child ripple-effect" >Contoh</span>
</div>

That's the tutorial on how to Make Demo Buttons and Material Design Downloads. May be useful.