How to create Beautiful Download Button in Blogger (Code)

Hello friends, welcome to the Jonak Axom blogging tutorial. Today you will learn how to add a Download Button in a Blogger blog post with pictures.

New Beautiful Responsive Download Button Code For Blogger

Nowadays, there are millions of websites and blog are over the internet including Android, PC, Apps, Coding, Videos, Music, News, Photos blogs or website, etc … And many websites and blogs have some downloadable data for users there, for example, when you download Pictures, use Pinterest, JioSaavn songs, Youtube videos, etc.

Jonakaxom is reader-supported. If you purchase through a link on my site, I may earn a commission. Disclosure Policy

If we have any downloaded files here and the user can just click the download button to download a file, now I am going to teach you to create a beautiful and responsive Download Button in the Blogger blog.

Blogspot Tutorial: How To Add A Download Button In Blogger Post  : Download Button For Blogger

Step 1: Go to the theme section of your blog | click on the HTML editing mode 

Step2: Paste the CSS code just below the blog name details or you can paste the code under head section.

CSS Code For Blogger Download Button

 /* Heading Font */
@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')}
.Blog .download-info{display:flex;align-items:center;margin:1.7em 0;padding:15px;border:2px solid #ebeced;border-radius:3px;font-size:13px}
.Blog .download-info .file-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;border-radius:15px;color:#fefefe;background:#ebeced linear-gradient(225deg,#00dcc0 0,#005af0 75%);font-weight:700;font-family:Poppins, sans-serif}
.Blog .download-info .file-text{padding:0 12px;width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.Blog .download-info .file-link{flex-shrink:0;display:flex;font-size:11px;margin:0 0 0 auto;padding:6px 10px}
.Blog .download-info .file-link .m-icon{width:15px;height:15px}
.button{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe !important;background-color:#005af0;border-radius:3px;font-size:13px;line-height:22px}
.m-icon.download{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23161617" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><polyline points="8 12 12 16 16 12"/><line x1="12" x2="12" y1="2" y2="16"/></svg>')}
.m-icon{display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center}

Step3: Go to Blogger Post and select a post which you want to add a beautiful Download button then click the Edit button on the post.

Step 4: Now Copy the HTML code given below and replace your URL with Red URL.

Html code For Blogger Download Button

<div class='download-info'> <span class='file-icon'>Zip</span> <span class='file-text'>Assamese Book.zip</span> <a class='button file-link' href='//jonakaxom.in' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a> </div>

Step 5: Click to Publish button and open Blogger Blog.

Note:- Replace The RED URL With Your URL | Before Paste

This is the most latest and best blogger download button code which I have personally used in most of my blogs .if you have any question regarding to my blogging tutorial please comment below.