Thursday, 15 July 2021

stylish download, demo and buy button for your Blogger

stylish download, demo and buy button for your Blogger
July 15, 2021


Do you want to create stylish download, demo and buy buttons for your Blogger blog? If you're having a hard time finding something stylish and eye-catching, check out what we have here for you.

If you run a Blogger site where you share downloadable files, you can use this code and add some stylish download buttons quite easily. Also, for those who run Blogger sites where they share templates and other code, this is the only code snippet you need to add download, demo and buy buttons.

The buttons use CSS for styling and the icons are all SVG (Not an awesome Font). In addition, the overall code is very short and will not affect the speed of your site.

Stylish download, buy and demo button


Start by getting the code below and pasting it in your Blogger template code just before ]]></b:skin> tag.You have to go to Themes >> Edit HTML then use CTRL + F to search for the above tags.

/* Stylish download, demo, and buy button*/

#btn-miusm {margin: 10px auto;

text-align: center;}

#btn-miusm br {display: none;}

.btn-miusm1 {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-miusm2 {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-miusm3 {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-miusm1:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}

.btn-miusm2:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}

.btn-miusm3:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}

.btn-miusm1:hover span.circle, .btn-miusm2:hover span.circle2, .btn-miusm3:hover span.circle3 {left: 100%;border-radius: 100%;margin-left: -45px;background-color: transparent;}

.btn-miusm1:hover span.circle{color: #fff;}

.btn-miusm2:hover span.circle2 {color: #fff;}

.btn-miusm3:hover span.circle3 {color: #fff;}

.btn-miusm1:hover span.title, .btn-miusm2:hover span.title2, .btn-miusm3:hover span.title3 {left: 40px;opacity: 0;}

.btn-miusm1:hover span.title-hover, .btn-miusm2:hover span.title-hover2, .btn-miusm3:hover span.title-hover3 {opacity: 1;left: 40px;}

.btn-miusm1 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-miusm2 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-miusm3 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-miusm1 span.title,.btn-miusm1 span.title-hover, .btn-miusm2 span.title2,.btn-miusm2 span.title-hover2,.btn-miusm3 span.title3, .btn-miusm3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #fff;transition: .5s;}

.btn-miusm2 span.title2,.btn-miusm2 span.title-hover2 {color: #fff;left: 70px;}

.btn-miusm3 span.title3,.btn-miusm3 span.title-hover3 {color: #fff;left: 60px;}

.btn-miusm1 span.title-hover, .btn-miusm2 span.title-hover2, .btn-miusm3 span.title-hover3 {left: 80px;opacity: 0;}

.btn-miusm1 span.title-hover, .btn-miusm2 span.title-hover2, .btn-miusm3 span.title-hover3 {

color: #fff;

}

The next step will be to add the HTML code button where you want it to be displayed. When writing your article, switch from compose view to HTML view and paste the HTML code as you wish.

Demo button HTML Code:

<div id="btn-miusm">
<a href="#" class="btn-miusm1" 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-miusm">
<a href="#" class="btn-miusm2" 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-miusm">
<a href="#" class="btn-miusm3" 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>


See the Pen Download,demo, buy now Buttons by Irfan Shah (@irfan-shah-the-selector) on CodePen.

hi

Share This :
SUBSCRIBE TO OUR NEWSLETTER

No comments: