Well, on this occasion the author will give a short tutorial on How to Make Cool Demo and Buy Now Buttons with CSS on Blogger.
The button that we make is only using CSS scripts, so no need to worry if your web loading will be heavy If you are interested in making it, you can see in the following tutorial.
How to Make a Demo Button and Buy Now
1. Log in to your Blogger account → Themes → Edit html
2. Copy the below and Paste the CSS Style code before the code]]> </ b: skin> or </style>
<style type='text/css'>
/* Demo and Buy Now by https://meeranblog24x7.blogspot.com */
#btn-cool {margin: 10px auto;
text-align: center;}
#btn-cool br {display: none;}
.btn-cool1, .btn-cool2, .btn-cool3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #009688;margin: 10px;transition: .5s}
.btn-cool2 {border: 2px solid #3f51b5;}
.btn-cool3 {border: 2px solid #d83500;}
.btn-cool1:hover {background-color: #009688;}
.btn-cool2:hover {background-color: #3f51b5;}
.btn-cool3:hover {background-color: #d83500;}
.btn-cool1:hover span.circle, .btn-cool2:hover span.circle2, .btn-cool3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}
.btn-cool1:hover span.circle{color: #009688;}
.btn-cool2:hover span.circle2 {color: #3f51b5;}
.btn-cool3:hover span.circle3 {color: #d83500;}
.btn-cool1:hover span.title, .btn-cool2:hover span.title2, .btn-cool3:hover span.title3 {left: 40px;opacity: 0;}
.btn-cool1:hover span.title-hover, .btn-cool2:hover span.title-hover2, .btn-cool3:hover span.title-hover3 {opacity: 1;left: 40px;}
.btn-cool1 span.circle, .btn-cool2 span.circle2, .btn-cool3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}
.btn-cool2 span.circle2 {background-color: #3f51b5;}
.btn-cool3 span.circle3 {background-color: #d83500;}
.btn-cool1 span.title,.btn-cool1 span.title-hover, .btn-cool2 span.title2,.btn-cool2 span.title-hover2,.btn-cool3 span.title3, .btn-cool3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}
.btn-cool2 span.title2,.btn-cool2 span.title-hover2 {color: #3f51b5;left: 80px;}
.btn-cool3 span.title3,.btn-cool3 span.title-hover3 {color: #d83500;left: 80px;}
.btn-cool1 span.title-hover, .btn-cool2 span.title-hover2, .btn-cool3 span.title-hover3 {left: 80px;opacity: 0;}
.btn-cool1 span.title-hover, .btn-cool2 span.title-hover2, .btn-cool3 span.title-hover3 {
color: #fff;
}
</style>
How to Install the Demo and Buy Now Buttons in Posts
Next, to install the Demo and Buy Now buttons, please follow the steps.
1. Select the Post menu → New post
2. Enter HTML mode instead of Compose
3. Then enter the below caller code markup
Note! Please replace the # sign with the Demo link or others.
<div id="btn-cool">
<a href="#" class="btn-cool3" 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>
4. Done.
Next is the display of the Demo and Buy Now buttons that have been installed on Blogger.
That's all the tutorial on How to Make Cool Demo and Buy Now Buttons with CSS on Blogger that the author has shared with you. If you have questions about this article, don't hesitate to comment below. May be useful.