Short Talk
Are you looking for a code by which you can add stylish demo, buy and download buttons to your blogger blog? If you were having trouble finding this, then you have come to the right place. In this article I will tell you How to Create stylish Download, Demo and Buy Button For Your Blogger Blog. So, Let's check out what I have here for you.
If you use a blogger blog where you share articles and posts related to downloading like movies, then you will need it a lot. you can use my code and also easily add some stylish download button which will look awesome on your website. This code will also be useful for those people who share templates and some other codes in their blog, Then you can easily add button of download, buy and demo through this given code.
This button is made using CSS, I have given a stylish look to its icon with the help of font awesome. Also, this code is not too lenghty and won't affect your website speed.
Advantage of Using this Button
- It will increase the awesomeness of your website pages.
- Visitors will easily find out the button.
- It will give your webpage a professional Look.
How to Make Stylish Download, Buy and Demo Button
Note:- Before beginning this tutorial backup your blogger theme to avoid any errors and issues.
- First Go To Blogger.Com.
- Open your blogger dashboard.
- Next, Click on the "Theme" Section and Click Edit Html. Option
- After that, Find <head> Tag on Theme
- Copy the below Font Awesome Link and paste it below <head> Tag.
- Now Again, Find ]]></b:skin> Tag on Theme
- Copy the below CSS Code and paste it above on ]]></b:skin> Tag.
Note:- For Copying the Code Double Click over the code box and use CTRL + C on your Keyboard.
<link crossorigin='anonymous' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css' integrity='sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p' rel='stylesheet'/>/* Stylish download, demo, and buy button by Techandfunzone*/
#wrap {
margin: 20px auto;
text-align: center;
}
.button-slide, .button-slide2, .button-slide3 {
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: .5s;
cursor: pointer;
box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff;
}
.button-slide3 {
border: 4px solid #66ef6b;
}
.button-slide2 {
border: 4px solid #efa666;
}
.button-slide:hover {
background-color: #0099cc;
}
.button-slide2:hover {
background-color: #efa666;
}
.button-slide3:hover {
background-color: #66ef6b;
}
.button-slide:hover span.circle, .button-slide2:hover span.circle2, .button-slide3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.button-slide2:hover span.circle2 {
color: #efa666;
}
.button-slide3:hover span.circle3 {
color: #66ef6b;
}
.button-slide:hover span.title, .button-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.button-slide:hover span.title-hover, .button-slide2:hover span.title-hover2, .button-slide3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.button-slide span.circle, .button-slide2 span.circle2, .button-slide3 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: .5s;
border-radius: 50%;
}
.button-slide2 span.circle2 {
background-color: #efa666;
}
.button-slide3 span.circle3 {
background-color: #66ef6b;
}
.button-slide span.title,
.button-slide span.title-hover, .button-slide2 span.title2,
.button-slide2 span.title-hover2, .button-slide3 span.title3,
.button-slide3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.button-slide2 span.title2,
.button-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.button-slide3 span.title3,
.button-slide3 span.title-hover3 {
color: #66ef6b;
left: 80px;
}
.button-slide span.title-hover, .button-slide2 span.title-hover2, .button-slide3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.button-slide span.title-hover, .button-slide2 span.title-hover2, .button-slide3 span.title-hover3 {
color: #fff;
}
.drkM .button-slide, .drkM .button-slide2, .drkM .button-slide3{background:#1f1f1f}
.drkM .button-slide, .drkM .button-slide2, .drkM .button-slide3{background:#2c2d31}
.drkM .button-slide, .drkM .button-slide2, .drkM .button-slide3 svg{stroke:#292828}
.drkM .button-slide, .drkM .button-slide2, .drkM .button-slide3{box-shadow: 2px 4px 11px #1f1f1f, -2px -4px 11px #000;}
.drkM .button-slide, .drkM .button-slide2, .drkM .button-slide3: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;
}Demo button HTML Code:
<div id="wrap">
<a onclick="window.open('URL')" class="button-slide">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a></div>Buy Button HTML Code:
<div id="wrap">
<a onclick="window.open('URL')" class="button-slide3">
<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>Download Button HTML Code:
<div id="wrap">
<a onclick="window.open('URL')" class="button-slide2">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Download here</span>
</a>
</div>Final Words
Hopefully, the Above tutorial has completely helped you to learn How to Add Adsense invalid click protector for blogger. If you have got any issues in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us
Was it helpful? Consider Donating below.. Thank you for visiting. Happy Blogging..
© Tech & Fun Zone