Hello friends, bloggers, on this occasion the admin will give a little tutorial on how to make Download, Demo and Buy Now Buttons on Blogger with CSS SVG which of course makes your blog still can work with performance that remains quickly accessible.
By combining a very cool hover animation in the form of a transition animation and a very slick gradient background, this button will help your blog appear more attractive and pleasing to the eye.
What's cool about buttons with this style?
With these advantages, your blog visitors will automatically feel more comfortable and often visit your blog, right?
How to Make Cool Download, Demo & Buy Now Buttons on NQnia-style Blogger
1. Please login to your blogger account.
2. Enter the THEME menu and click Edit HTML
3. Next look for the code ]]></b:skin> and paste the code below right above the code.
/* NQnia Download */
#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;
}
Please, buddy, adjust it yourself for the color
4. If so, click SAVE.
The last step,
6. Make a new post then please copy the code below and paste it in the HTML menu instead of COMPOSE.
<div id="btn-nqnia">
<a href="http://bit.ly/2BZyxbe" 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>
<div id="btn-nqnia">
<a href="http://bit.ly/2BZyxbe" 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>
<div id="btn-nqnia">
<a href="http://bit.ly/2BZyxbe" 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>