Demo and Download Button For Blogger | Material Design

Download button, Download button in html

Demo and Download button | Material Design - Hello Guys Today I am gonna show you how to add Demo and Download button with material design on blogger.

We all know by default we cant use buttons in our posts since no blogger template provides such features except templates provided by SoraTemplates. They provide some good features in their template either it is free or premium.

Download Button | why ?

Why it has important role in blogs ?? Why we need to add these buttons to our blogs ??

We are providing informations through our blog, so sometimes we need to give any links or files accordance with the information we shared. so that time we put images to cover the link

Since they are images they will increase the loading speed of our blog. it will make a bad impact on our SEO since google gives very importance to the loading speed of the website.

So if we can add the html buttons to our blog instead of the images, then that will save us from the slow loading speed of our blog caused by using the unoptimized images.

I already shared a post How To add Animated download button in HTML. And this is an improved version of that post. Here we added hover effects on click and material design to our download button.

In this post, we are adding material design demo and download buttons

Demo and Download Button | Material Design

As we know, now Material Design has become a trend as a web interface or user interface both on mobile and desktop devices on a website page. This web interface is also welcomed by users and website developers because it has a lot of useful features and a more attractive appearance.

So we will provide here simple download button with animation effects and materials Design.

How to Add the Download Button Code

First open Blogger > Go to Themes > Click Edit HTML >

Add CSS code below Above the code ]]></bskin> or </style>

#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 above the </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>

Then save the template

Now for the calling code, add the HTML code in the post where you need this demo and download button. (not in 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>

Replace the # with your download link

Conclusion

Now we have added a material design Demo and Download Button on our Blog post.
If you have any doubts regarding this article please mention it in the comment section.

blogging - ഫെബ്രുവരി 20, 2019

Arunkumar

A professional content writer and tech savy. He love to explore new stuff and explain it in a simple way. No matter what and how complicated it is

Disclaimer: This post may contain affiliate links that earn me a small commission, at no additional cost to you. I only recommend products I personally use and love, or think my readers will find useful.

Read other related articles