How to add download button in blogger ?

Do you want to add download button in blogger post ? If yes then you are at the best possible place.

In todays world almost everything is online and there are alot of web based services like watching movies , listening music , reading blogs , social media etc. And among those many websites offer some data to download and in similar way you may also provide something to download to your visitors.

And those files can be downloaded simply by clicking a button . So lets understand what is a download button.

You should know that download button doesnt exists practically yes almost all website in this world uses download link . And when user click these link then download is triggered and files get downloaded.

So i assume that you have this download link and now you want to set this link in a button in blogger post.

Generally these download links are created by file host to trigger download mechanism . Like google drive provide a way to host such files or mediafire or dropbox etc are some hosts which offer file storage.

How to add download button in blogger ?

In order to set that link to button just follow these steps.

Step1 : Go to blogger dashboard and open any post in HTML mode.

Step 2 : copy code below and paste it where you want download button ,there are two different types of button simple button and game type button . Copy any one which you like.

First type of buttons


  
<a href="Downloadlink" >
<button class="pirate-button blue round">Download</button>
</a>
<style type="text/css">
.pirate-button{
height:40px;
width:140px;
font-size:16px;
color:white;
border:none;
font-weight:300;
border-radius:3px;
}

.blue{
background:rgba(0,50,150,0.9);
}
.red{

background:rgba(150,0,0,0.9);
}
.green{

background:rgba(0,100,0,0.9);
}
.cyan{
background:rgba(0,100,100,0.9);
}
.purple{

background:rgba(100,0,100,0.9);
}
.round{

border-radius:20px;
}
</style>

Preview of buttons

second type of button or game buttons


  
    
<a href="DownloadLink" >
<button class="game-button">Download</button>
</a>
    
  <style type="text/css">.game-button {
 position: relative;
 top: 0;
 cursor: pointer;
 text-decoration: none !important;
 outline: none !important;
 font-family: 'Carter One', sans-serif;
 font-size: 20px;
 line-height: 1.5em;
 letter-spacing: .1em;
 text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px  #004a87;
 border: none;
 margin: 15px 15px 30px;
 background: repeating-linear-gradient( 45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
 border-bottom: 3px solid rgba(16, 91, 146, 0.5);
 border-top: 3px solid rgba(255,255,255,.3);
 color: #fff !important;
 border-radius: 8px;
 padding: 8px 15px 10px;
 box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0,0,0,.3);
}
.game-button:hover {
 top:2px;
 box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0,0,0,.3);
}
.game-button::before {
 content: '';
 height: 10%;
 position: absolute;
 width: 40%;
 background: #fff;
 right: 13%;
 top: -3%;
 border-radius: 99px;
 }
.game-button::after {
 content: '';
 height: 10%;
 position: absolute;
 width: 5%;
 background: #fff;
 right: 5%;
 top: -3%;
 border-radius: 99px;
 }
.game-button.orange {
  background: repeating-linear-gradient( 45deg, #ffc800, #ffc800 5px, #ffc200 5px, #ffc200 10px);
 box-shadow: 0 6px 0 #b76113, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #75421f, 0 12px 0 5px #8a542b, 0 15px 0 5px #593116, 0 15px 1px 6px rgba(0,0,0,.3);
 border-bottom: 3px solid rgba(205, 102, 0, 0.5);
 text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px  #c96100;
}
.game-button.orange:hover {
 top:2px;
 box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #75421f, 0 10px 0 5px #8a542b, 0 13px 0 5px #593116, 0 13px 1px 6px rgba(0,0,0,.3);
}
.game-button.red {
  background: repeating-linear-gradient( 45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
 box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0,0,0,.3);
 border-bottom: 3px solid rgba(160, 25, 23, 0.5);
 text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px  #930704;
}
.game-button.red:hover {
 top:2px;
 box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0,0,0,.3);
}
.game-button.green {
  background: repeating-linear-gradient( 45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
   box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0,0,0,.3);
   border-bottom: 3px solid rgba(40, 117, 29, 0.5);
   text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
}

.game-button.green:hover {
  top:2px;
  box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0,0,0,.3);
}
</style>

Preview of buttons

Step 3 : replace that href="downloadLink" with your file download link.

Step 4 : just save your post and your download button is ready to work.

Editing Button's color and round border

I have created 5 different colour of button in simple buttons and 4 different colours in game type buttons.
Red , green , blue , cyan , purple in simple.
You can choose and use any one of them . In order to change color go to <button class="pirate-button blue" replace this blue by red or cyan or green or purple And you will get your required colour .

And to get round border or say curved button add round at last of color inside class.

Similarly in game buttons there are 4 different colors and you can similarly add color names inside class=" game-button orange" This orange can be replaced by red or orange or green.

And if you didn't used any of these word then by default it will be blue. I have added blue as default so if no colour is mentioned it will appear blue.

Conclusion

Having a download button makes everything very professional and make it easier for your visitor to download given files. There are many ways you can create button first is native css buttons which is very simple , fast and occupy less storage .
Other methods are prebuilt images which can be used but professionals don't recommend them why ? Because it takes alot of storage and increases your loading time . CSS button are few KB where as images are more than 200KB .

So in my opinion always use css buttons in blog as its professional plus takes less storage. Yeah they are not fancy but you know its about work not about fashion and looks but again game button looks attractive right.

If you liked this post then please share it and please link to this blog.
Thanks
Read also :

How to create a free blog and make money

Ultra lite guude to earn your first 100$

swipbook.com

Pirates of Blogger

Search This Blog

How to add download button in blogger ?

How to add download button in blogger ?

First type of buttons

Preview of buttons

second type of button or game buttons

Preview of buttons

Conclusion

Labels

Comments

Post a Comment

Popular posts from this blog

How to create a static home page in Blogger ?

How to add links in blogger comment ?