Demo and Download Button For Blogger | Material Design

Must Read

Top 7 Google tips on security and privacy on Android

Google has published its seven most important privacy tips on Android, as well as ideas to increase the security...

What is Gmail confidential mode: your emails much more secure

Do you want your emails to have more privacy? Find out all about the Gmail confidential mode and send more...

how to have root without actually rooting your phone

As much as the ROOT or administrator access remains attractive to experienced users, there is no doubt that Android...

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

Download button

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.


LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest News

Top 7 Google tips on security and privacy on Android

Google has published its seven most important privacy tips on Android, as well as ideas to increase the security...

What is Gmail confidential mode: your emails much more secure

Do you want your emails to have more privacy? Find out all about the Gmail confidential mode and send more private emails. Privacy is something that...

how to have root without actually rooting your phone

As much as the ROOT or administrator access remains attractive to experienced users, there is no doubt that Android has overcome this need by...

How to activate whatsapp fingerprint lock

Do you want to add extra security to your WhatsApp? Now you can block it with the fingerprint if you install the latest beta....

Telegram Desktop [ Review ]

Do you know what Telegram Desktop is? you may know what is telegram but not heard about the desktop version. so today we are...

More Articles Like This