If you are running a Blogger site where you shared downloadable files, you can use this code and add some stylish download button pretty easy. Also, for those who are running a Blogger site where they share templates and other codes, this piece of code is all you will be needing to add both a download, demo and buy button.
The button makes use of CSS for the stylish and the icon are all SVG( Not Font awesome). Also, the overall code is very short and won't affect your site speed.
Making a Stylish download, buy and demo button
- Start by getting this code below and pasting it in your Blogger template code just before the ]]></b:skin> tag. You will have to go to Theme >> Edit HTML then use CTRL + F to search for the above tag.
/* Stylish download, demo, and buy button*/
#btn-nqnia {margin: 10px auto;
text-align: center;}
#btn-nqnia br {display: none;}
.btn-nqnia1 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-nqnia2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-nqnia3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-nqnia1:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-nqnia2:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-nqnia3:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-nqnia1:hover span.circle, .btn-nqnia2:hover span.circle2, .btn-nqnia3:hover span.circle3 {left: 100%;border-radius: 100%;margin-left: -45px;background-color: transparent;}
.btn-nqnia1:hover span.circle{color: #fff;}
.btn-nqnia2:hover span.circle2 {color: #fff;}
.btn-nqnia3:hover span.circle3 {color: #fff;}
.btn-nqnia1:hover span.title, .btn-nqnia2:hover span.title2, .btn-nqnia3:hover span.title3 {left: 40px;opacity: 0;}
.btn-nqnia1:hover span.title-hover, .btn-nqnia2:hover span.title-hover2, .btn-nqnia3:hover span.title-hover3 {opacity: 1;left: 40px;}
.btn-nqnia1 span.circle {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-nqnia2 span.circle2 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-nqnia3 span.circle3 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-nqnia1 span.title,.btn-nqnia1 span.title-hover, .btn-nqnia2 span.title2,.btn-nqnia2 span.title-hover2,.btn-nqnia3 span.title3, .btn-nqnia3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #fff;transition: .5s;}
.btn-nqnia2 span.title2,.btn-nqnia2 span.title-hover2 {color: #fff;left: 70px;}
.btn-nqnia3 span.title3,.btn-nqnia3 span.title-hover3 {color: #fff;left: 60px;}
.btn-nqnia1 span.title-hover, .btn-nqnia2 span.title-hover2, .btn-nqnia3 span.title-hover3 {left: 80px;opacity: 0;}
.btn-nqnia1 span.title-hover, .btn-nqnia2 span.title-hover2, .btn-nqnia3 span.title-hover3 {
color: #fff;
}
- The next step will be adding the button HTL code where you want it to be displayed. When writing your article, switch from the compose view to HTML view and paste the HTML code corresponding to what you want.
Demo button HTML Code:
<div id="btn-nqnia">
<a href="http://bloggercustomiz.com" class="btn-nqnia1" target="_blank">
<span class="circle"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" /> </svg></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>
Download Button HTML Code:
<div id="btn-nqnia">
<a href="http://bloggercustomiz.com" class="btn-nqnia2" target="_blank"><span class="circle2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> </svg></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
Buy button HTML Code:
<div id="btn-nqnia">
<a href="http://bloggercustomiz.com" class="btn-nqnia3" target="_blank"><span class="circle3"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
</svg></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Click here</span>
</a>
</div>
Disclaimer: Bloggercustomiz is not the original creator of this code. We simply share with you. You can see the live demo here from this coodepen by Shaampc.
0 Comments