Also Read


Download buttons are essential for most bloggers and internet marketers. Buttons such as "Download Now" and "Download PDF" can help you generate more leads with your blog. In this article, I'm going to show you step by step how to easily add these buttons to your blogger website for better blogger outreach.


How To Add Stylish Download Buttons On Blogger Website

hard as it may sound.
It can be done by adding a few codes of HTML and CSS to your blogger theme HTML by just copying and pasting.


1. First of all you need to go to the THEME tab from your blogger dashboard and select "CUSTOMISE".




2. Tap the dropdown menu icon to open advanced options.


3. Then tap layout options.




4. Scroll down and select ADD CSS.



5. A text space will appear and that is where you shall paste the CSS code provided below. Then after pasting it, click the save button to save changes.

.mybutton3{ border: 2px solid red; outline: none; text-align: center; font-size: 15px; padding: 10px 22px; background-color: white; color: black; cursor: pointer; width: auto; height: auto; border-radius: 30px; } .mycenter{ display: flex; align-items: center; justify-content: center; }



6. The next step is to use the item; 
Create a new post and select HTML VIEW paste there the HTML CODE below.

<div class="mycenter"> <button class="mybutton3"><a href="https://www.scotug.com" style="color:red">Download Now</a></button></div>

replace www.scotug.com with your download or target link and save.




Note: you can change the colours by editing the CSS code.

Below are some of the download button samples you can choose what you prefer.


CSS CODE
.mybutton3{
border: 2px solid red;
outline: none;
text-align: center;
font-size: 15px;
padding: 10px 22px;
background-color: white;
color: red;
cursor: pointer;
width: auto;
height: auto;
border-radius: 30px;
}
.mycenter{
display: flex;
align-items: center;
justify-content: center;
}


HTML CODE

<div class="mycenter">
<a href="https://https://andeprotech.blogspot.com/com" >
<button class="mybutton3">Download Now</button>
</a>
</div>


CSS CODE

>

.mybutton4{
border: none;
outline: none;
text-align: center;
font-size: 15px;
padding: 10px 22px;
background-color: red ;
color: white;
cursor: pointer;
width: auto;
height: auto;
border-radius: 30px;
transition: 0.3s;
opacity: 0.5;
}
.mycenter{
display: flex;
align-items: center;
justify-content: center;
}
.mybutton4:hover{
opacity: 1;
}

HTML CODE

<div class="mycenter">
<a href="https://andeprotech.blogspot.com/" >
<button class="mybutton4">Download Now</button>
</a>
</div>


CSS CODE
.mybutton5{

border: none;
outline: none;
text-align: center;
font-size: 15px;
padding: 10px 22px;
background-color: #000000 ;
color: white;
cursor: pointer;
width: auto;
height: auto;
border-radius: 30px;
}
.mycenter{
display: flex;
align-items: center;
justify-content: center;
}
.mybutton5:hover{
background-color: #ff0000
}


HTML CODE

<div class="mycenter">
<a href="https://andeprotech.blogspot.com/" >
<button class="mybutton5">Download Now</button>
</a>
</div>


CSS CODE
.mybutton2{
border: none;
outline: none;
text-align: center;
font-size: 15px;
padding: 10px 22px;
background-color: red;
color: white;
cursor: pointer;
width: auto;
height: auto;
border-radius: 30px;
}
.mycenter{
display: flex;
align-items: center;
justify-content: center;
}


HTML CODE

<div class="mycenter">
<a href="https://andeprotech.blogspot.com/" >
<button class="mybutton2">Download Now</button>
</a>
</div>


CSS CODE 
.mybutton1{
border: none;
outline: none;
text-align: center;
font-size: 15px;
padding: 10px 22px;
background-color: red;
color: white;
cursor: pointer;
width: auto;
height: auto;
border-radius: 5px;
}
.mycenter{
display: flex;
align-items: center;
justify-content: center;
}


HTML CODE

<div class="mycenter">
<a href="https://andeprotech.blogspot.com/" >
<button class="mybutton1">Download Now</button>
</a>
</div>


Finally, download buttons are a good way to get more traffic and lead from your blog and refer your site visitors to external files which cannot be hosted on the blogger site. What else have I missed in this article, let me know from the comment box below?