How To Add Professional Gradient Download Buttons in Blogger Post
 |
In today's days, there are many websites and blogs on the internet and all websites have their own download button, today I have come to you regarding this topic and I am going to tell you how you can do it in your blogger template.
So hey guys today in this post I am gonna show you how to add gradient download button in blogger post or blogger.
The buttons are professional download button or you can use it in your own ways
These download buttons buttons are fully responsive and compatible with every device,and i will give html and css code of download buttons.Lets Start
Steps,There are only two steps
step 1: Adding Css
Step 2: Adding Html(Download button)
First of all You >Go to theme
> Then Search For </head> and paste the Css just above/before the </head>
Douple tap to copy
<style type='text/css'>* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.buttons {
margin: 0%;
text-align: center;
}
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align: center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:focus {
outline: none;
}
.btn-hover.color-1 {
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}
</style>
Douple tap to copy
<div class="buttons"><button class="btn-hover color-1" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-2" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-3" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-4" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-5" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-6" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-7" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-8" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-9" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-10" onclick="window.open('#')">Download</button></div>
<div class="buttons"><button class="btn-hover color-11" onclick="window.open('#')">Download</button></div>For One Download Button
<div class="buttons"><button class="btn-hover color-11" onclick="window.open('#')">Download</button></div>
Just change # with your link and blue colour text with above css class colours
Ex:- color-10,color-11 etc.
People Also search for
How to create Beautiful Download Button in Blogger 2022 | Html And css download buttons,how-to-a...
How to Add Download Button in Blogger [Guide + FAQs] | Best stylish Download button html code for Blogger in 2022 | How to Add download button in blogger without Coding | How to Add Countdown Timer Button in Blogger Post | How to download button in Blogger | Stylish Download button for Blogger | Advance gradient download button for blogger| gradient download button for blogger|
Rate this article
Getting Info...
1 comment