Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | How To Create Beautiful Effect Download Button For Blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Hello everyone, you are free to publish a new post for you. As you all know, the classic Download button has made us boring and unattractive for the downloader. That's why today I will guide everyone to create a multicolored Download button, you can see the demo below.


how-to-create-beautiful-effect-download-button-for-blogspot






Step 1: Copy the entire code below and paste it on the </head> . tag


Source Code

<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>



Step 2: Add this html to the blog post


below are 11 different colored buttons

<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>

Epilogue


So I have shared with you the Download button is very colorful and beautiful. If you have any questions or complaints about copyright, please comment below to let me know. Hope you have a very productive day.
Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.