Create Demo Keys And Material Design Downloads
11 Sep 2018
Creating Demo Keys and Material Design Downloads - As we know, now Material Design has become a animo 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 Pandu Ahsan 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>
Now for the caller code, add the HTML code below in the post on the HTML tab (not compose)
On this occasion Pandu Ahsan 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 readjustThen 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 buttonthen 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 codeFinished! And see the results
See the Pen how to Make Demo Buttons and Material Design Downloads. May be useful.