So hello, friends, today I will teach you all how to use stylish animated buttons in Blogger, so that your blog and website look even better. Due to this, the ranking of your website also improves, if more new users come and tap on it, then they also like it. And if you guys are looking for the code by which you can create a unique stylish demo, and buy button for your blogger’s blog, then today you have come to the right place. If you are having trouble finding it then now you don’t have to worry about anything, you have come to the right place. In today’s article, I will teach all of you How to create an Attractive Demo, and Buy Button for Bloggers. So let’s see today we have brought some new and best stylish buttons for you.
If you use blogger, where you people give your articles and posts like movies or applications, then this is very useful for you, you people can use the code given by me and easily all of you get in my blog. Just like the buttons on the blog, you can easily apply them and the look of your website starts looking even more beautiful. This code is also beneficial for all those users who share templates or any other kind of code on their blog, then they must add this type of button which is Demo, or Buy Button if you want, you can just get the demo and You can also use the buy button code.
This button is made with custom CSS, I have given a different style to its look, that too along with the icon, I have also styled the font along with it. This code is not very big. And it will not have any effect on your website.
USE OF THIS BUTTON
- It increases the speed of your website pages.
- Any visitor who comes to our website can easily find the button.
- It gives a professional look and stylish design to our website and webpage.
HOW TO CREATE AN ATTRACTIVE DEMO, AND BUY BUTTON FOR BLOGGERS
Notice! Before doing this step, you have to take backup of your theme so that if any kind of error or issue comes, we can solve it with the help of backup theme.
- First of all you have to come to Blogger.com.
- You have to log in to your Blogger dashboard.
- Now you have to click on the “Theme” section ** and click on the icon and click on Edit HTML and your blogger theme edit section will open.
- After that now you have to search for <head> tag in the section of your theme.
- Now you have to copy the link code of Font Awesome given below and paste it below the <head> tag.
Notice! If you want to copy the code, then for that you have to double click on the code box and tab on Ctrl + C keyboard and copy it.
<link
crossorigin="anonymous"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
rel="stylesheet"
/>
HOW TO ADD CSS CODE
Friends, we have just added the code of Font Awesome in the theme edit section, now we have to add the CSS code, its steps have been told to you below, you have to add it in the same way.
- Now you have to search again in the theme edit section ]]></b:skin> tag in your theme section.
- You have to copy the CSS code given below and paste it above the ]]></b:skin> tag.
/* Stylish demo, and buy button by Tech Shreyansh*/
#wrap {
margin: 20px auto;
text-align: center;
}
.tech-shreyansh,
.tech-shreyansh2,
.tech-shreyansh3 {
position: relative;
display: inline-block;
height: 56px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 40px;
background: #ooo000;
border: 4px solid #0099cc;
margin: 10px;
transition: 0.5s;
cursor: pointer;
box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff;
}
.tech-shreyansh3 {
border: 4px solid #66ef6b;
}
.tech-shreyansh2 {
border: 4px solid #efa666;
}
.tech-shreyansh:hover {
background-color: #0099cc;
}
.tech-shreyansh2:hover {
background-color: #efa666;
}
.tech-shreyansh3:hover {
background-color: #66ef6b;
}
.tech-shreyansh:hover span.circle,
.tech-shreyansh2:hover span.circle2,
.tech-shreyansh3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.tech-shreyansh2:hover span.circle2 {
color: #efa666;
}
.tech-shreyansh3:hover span.circle3 {
color: #66ef6b;
}
.tech-shreyansh:hover span.title,
.tech-shreyansh2:hover span.title2 {
left: 40px;
opacity: 0;
}
.tech-shreyansh:hover span.title-hover,
.tech-shreyansh2:hover span.title-hover2,
.tech-shreyansh3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.tech-shreyansh span.circle,
.tech-shreyansh2 span.circle2,
.tech-shreyansh3 span.circle3 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: 0.5s;
border-radius: 50%;
}
.tech-shreyansh2 span.circle2 {
background-color: #efa666;
}
.tech-shreyansh3 span.circle3 {
background-color: #66ef6b;
}
.tech-shreyansh span.title,
.tech-shreyansh span.title-hover,
.tech-shreyansh2 span.title2,
.tech-shreyansh2 span.title-hover2,
.tech-shreyansh3 span.title3,
.tech-shreyansh3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: 0.5s;
}
.tech-shreyansh2 span.title2,
.tech-shreyansh2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.tech-shreyansh3 span.title3,
.tech-shreyansh3 span.title-hover3 {
color: #66ef6b;
left: 80px;
}
.tech-shreyansh span.title-hover,
.tech-shreyansh2 span.title-hover2,
.tech-shreyansh3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.tech-shreyansh span.title-hover,
.tech-shreyansh2 span.title-hover2,
.tech-shreyansh3 span.title-hover3 {
color: #fff;
}
.drkM .tech-shreyansh,
.drkM .tech-shreyansh2,
.drkM .tech-shreyansh3 {
background: #1f1f1f;
}
.drkM .tech-shreyansh,
.drkM .tech-shreyansh2,
.drkM .tech-shreyansh3 {
background: #2c2d31;
}
.drkM .tech-shreyansh,
.drkM .tech-shreyansh2,
.drkM .tech-shreyansh3 svg {
stroke: #292828;
}
.drkM .tech-shreyansh,
.drkM .tech-shreyansh2,
.drkM .tech-shreyansh3 {
box-shadow: 2px 4px 11px #1f1f1f, -2px -4px 11px #000;
}
.drkM .tech-shreyansh,
.drkM .tech-shreyansh2,
.drkM .tech-shreyansh3:hover {
box-shadow: inset 3px 5px 10px #1f1f1f, inset -3px -5px 10px #000;
border: 4px solid rgba(31, 34, 38 0.2);
font-size: 16.9px;
}
HOW TO PUT THE BUTTON IN THE POST
First of all, friends, you have to open your blogger dashboard, after that, after completing the above two steps, you have to come to the third step. Now you have to click on New Post and put whichever stylish button you want. You have to put its code in HTML format.
STYLISH DEMO BUTTON CODE 1
<div id="wrap">
<a onclick="window.open('URL')" class="tech-shreyansh">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>
STYLISH BUTTON CODE 2
<div id="wrap">
<a onclick="window.open('URL')" class="tech-shreyansh2">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Download here</span>
</a>
</div>
STYLISH BUY BUTTON CODE 3
<div id="wrap">
<a onclick="window.open('URL')" class="tech-shreyansh3">
<span class="circle3"><i class="fa fa-shopping-cart"></i></span>
<span class="title3">Buy</span>
<span class="title-hover3">Buy Now</span>
</a>
</div>
CONCLUSION
I hope that today’s article How to create an Attractive Demo, and Buy Button for Bloggers will be very helpful for you. If you people want more such articles, then please follow our Telegram channel Tech Shreyansh for new and helpful updates.
What I have told above about stylish buttons will definitely be helpful for you and your website. If you face any kind of problem in this tutorial then you can contact me for this and you can also reach out through comment and contact through that also.
If you found this helpful then please donate something to us, I will be very helpful to all of you. Thank you all for visiting our website. Happy blogging
