Table of Contents
Everyone wants to put a download button on their blogger post if they want to provide something to someone whether it is any code or any text. Let's create a download button so that if someone clicks on this download button, he will get that result. Today I will teach you how to make three types of buttons.
Hopefully, when you are reading this article and the step-by-step methods I have provided, if you follow all of them, you will have a great blog and SEO fully optimized blog with your buttons etc. The download buttons can be added easily.
Types of Download Buttons
- Button Link
- Download Button Link
- Countdown Download Button
1. Button Link
How to add a button link follow these steps carefully. In the post or page in which you want to add the button link, first open it and go to the place where you want to add this button.After that paste code given below
Button
.html
<a class='button' href='url_is_here'>Title_link</a>
Alternative Style
Button
.html
<a class='button ln' href='url_is_here'>Title_link</a>
Button Link with Icons
Download Demo
.html
<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>
with <svg> icons
.html
<a class='button' href='url_is_here'>
<svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
<span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
<svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
<span>Buy now!</span>
</a>
Add style='fill:#fff; margin-right:12px;' or style='stroke:#fff; margin-right:12px;' attribute to give SVG icon a white color.
Two button in single line:
.html
<div class='btnF'>
<a class='button ln' href='url_is_here'>Demo</a>
<a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
</div>
2. Download Link
To provide downloaded file information to users.
.html
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT' data-text='zip'></span>
<div class='fN'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fS'>200kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
With background image instead of text
In this if you want to change icon image then replace icon URL with Highlighted first line as well as you can change title and size of download and in last you can change icons in aria-label.If you want to provide download link then paste in url_is_here.
.html
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
<div class='fN'>
<!--[ File name ]-->
<span>about_me.png</span>
<span class='fS'>10kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
3. Countdown Download Box
This feature will show a countdown before the user downloads any file.
This feature requires direct download link of cloud files. You can use Google Drive to get direct download link of a file.
With Image:
about_me.webp Jan 1, 2022 165KB 1080×1080 .webp
Please wait...
Without Image
about_me.webp Jan 1, 2022 165KB 1080×1080 .webp
Read This Instruction Before Using Below Code
- In the first line of code, you can also change the ID whatever you want.
- In the second highlighted part, you can see that in the (image_url_here), in this code you will paste the URL of your image or icon here.
- In Class=’dldIn’ you can change its ID, its name, its category, its size, its resolution or its extension.
- And in the last one, which is the download button, where you see the hash ‘#’, you have to replace it with the URL of your drive share link by using this Direct Download Link Generator Tool After the #, you will see 10 written, if you want to increase or decrease download time then simply change the time in seconds. Next don't touch the false section and if you change the id at the start then you have to change the id at the last otherwise no need to change the id at the start and end.
Writing format
<div class='dldCo' id='download1'>
<div class='dldBx'>
<div class='dldTp'>
<div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
<svg class='dldSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c dldPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='dldIn'>
<span data-text='Name'>Music_Wallpaper.png</span>
<span data-text='Category'>Music</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Resolution'>1920×1080</span>
<span data-text='Extension'>.png</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='dldSl'>
<div class='dldMe'></div>
</div>
</div>