5 Best stylish Download button html code for Blogger in 2021

Adding the Stylish Download button in blogger is not more difficult. If you have some coding (HTML and CSS) knowledge, then you can do it very easily.

If you create a simple download button or any button on the blogger platform with the help of <button>...</button> tags then the button does not look attractive but if you add some CSS for it then that the button becomes more attractive.

How to add a Table like WordPress in Blogger Post with HTML Code?

Here you will get to see the 5 best stylish download buttons for your blogger site. You just need to simply add its CSS in your blogger theme after that whenever you will create a button on your blogger website then those buttons will look more attractive than before.

How to add custom CSS in the blogger theme?

If you don't want to add CSS, again and again, to create the new download button on your webpage then you have to save its CSS code in your blogger theme and after that whenever you will create a download button on any post at that time you will not need to write its CSS + HTML code, for creating a new button you just need to write HTML code only.

Here is the way how you can save any CSS code in your blogger theme just follow the below steps.

Step 1

First of all, open your blogger dashboard then click on the "Theme" option.

Step 2

Now you have to click on the "CUSTOMISE" option. After clicking on the CUSTOMISE option you will get to see three more options which are Background, Advanced, and Gadgets.

Step 3

Now click on the Advanced option and after that, you will see the Theme colors option click on that option after that you will more options within it, and scroll down and select the 'Add CSS' option.

Step 4

Now in the Add CSS section here you have to paste the only CSS code so that you don't have to add the CSS code again and again and click the save option (on the right bottom side).

Here are the 5 types of download buttons with their CSS and HTML code:

1. First Button

- Here is the 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;

}

---

- Here is the HTML code for the Button -

---

<div class="mycenter">

<a href="https://www.naviera101.com" >

<button class="mybutton1">Download Now</button>

</a>

</div>

---

2. Second Button

- Here is the 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;

}

---

- Here is the HTML code for the button -

---

<div class="mycenter">

<a href="https://www.naviera101.com" >

<button class="mybutton2">Download Now</button>

</a>

</div>

---

3. Third Button

- Here is the 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;

}

---

- Here is the HTML code for the button -

---

<div class="mycenter">

<a href="https://www.naviera101.com" >

<button class="mybutton3">Download Now</button>

</a>

</div>

---

4. Fourth Button

- Here is the 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;

}

---

- Here is the HTML code for the button -

---

<div class="mycenter">

<a href="https://www.naviera101.com" >

<button class="mybutton4">Download Now</button>

</a>

</div>

---

5. Fifth Button

- Here is the 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

}

---

- Here is the HTML code for the button -

---

<div class="mycenter">

<a href="https://www.naviera101.com" >

<button class="mybutton5">Download Now</button>

</a>

</div>

---

Note: 

• You can customize the button color according to your blog theme for For that purpose you have to change the color in the CSS code.
• You can replace the button name and the hyperlink in the anchor tags (<a>....</a>) in the HTML code or it will be easy for you when you will change it in the "Compose View" section of a post.
• After adding custom CSS code for the button in your theme successfully then you have to paste only the "HTML code for the button" code in the HTML view section of your new post. 
• You can change the button shape (rectangular or capsule shape) with the help of the "border-radius: " property in CSS code.
• If you know about more CSS property, then you can create more effects on the button.

[ Watch This Video For Tutorial ]

Also Read | 10 Best Free Super Fast blogger Templates 2021

Also Read | 15 Best Free Blogger Templates with Dark mode Feature