Create Demo and Download buttons with beautiful wave effect

 As you know, the current Blogspot design is not only a matter of functionality, but it also has to add to the aesthetics of each individual.

how to make a download button in HTML

Today, I share with you how to Create Demo and Download buttons with a beautiful wave effect. When we click on the button we will see the effect:

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

/ * 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)}}

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

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

And this is the HTML that shows up in your post

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

Above is the tutorial Create Demo and Download buttons with a beautiful wave effect for Blogspot. Hope you will enjoy it.

            live demo