Skip to content
← Back to Community
How to Make a Download Button!
Profile icon
PowerCoder

This will be a simple and useful tutorial on how to add download buttons.

In your HTML file make an anchor tag:

<a>Download</a>

Then, add the content you want to download in the href attribute:

<a href="test.png">Download</a>

Lastly, to add a name to the file that the user is going to download, add the name in the download attribute:

<a href="test.png" download="Test-file">Download</a>

Now, if you click on our download button, it should download the file.

Voters
Profile icon
heghogcoder123
Profile icon
JaymeJackson
Profile icon
Controller123
Profile icon
rexjohannes
Profile icon
augustinliebard
Profile icon
Leroy01010
Profile icon
Laurauwu
Profile icon
DavidLuzzatto
Profile icon
bcw5002
Profile icon
mkw
Comments
hotnewtop
Profile icon
Muffinlavania

Nice and simple!

Profile icon
PowerCoder

@Muffinlavania Thank you!

Profile icon
Coder100

This will work only sometimes
This is purely due to browser behavior.
Nice tutorial btw!

Profile icon
PowerCoder

@Coder100 I didn't know that 🤔. And thank you 😀!

Profile icon
Coder100

No problem! :D @PowerCoder

Profile icon
jackou

Very helpful! 👍

Edit: I keep forgetting I can't use emojis like that in Repl.it markdown smh

Profile icon
danilobarros

Gostei

Profile icon
PowerCoder

@danilobarros
Obrigado (eu literalmente usei o Google Translate para isso)

Profile icon
MemeManHimself

@PowerCoder lol é isso que eu faço para qualquer idioma que eu não conheço (e eu falo inglês btw)

Profile icon
PowerCoder

@TheMemeManHimse Oh. Está bem. Basta falar inglês nesta plataforma. Infelizmente, ninguém sabe português aqui.

Profile icon
MemeManHimself

@PowerCoder Ech maachen normalerweis: D lol awer um ok dann op d'mannst erausfannen

Profile icon
theworldoflucks

This was really useful thanks!

Profile icon
techgeek680

Cool! :)

Profile icon
PowerCoder

@techgeek680 Thanks!

Profile icon
techgeek680

@PowerCoder I just registered today, and I had a FaceTime call with my friend. Now I know a little bit more.

Profile icon
techgeek680

@PowerCoder how did you make the screen black?

Profile icon
PowerCoder

@techgeek680 Cool! In my style.css file, I added this piece of code:

body { background-color:rgb(99, 99, 99); }

To add a different background to your website background, just change background-color to a different color.

Example:

body { background-color:blue; }
Profile icon
techgeek680

@PowerCoder thanks so much!

Profile icon
Ashleyshapiro20

ok not bad

Profile icon
MemeManHimself

Nice dude

Profile icon
ChezCoder

the download attribute can be blank:
<a href="test.png" download>Download</a>

Profile icon
CodingGoose

Woah.... so cool! :)

Profile icon
PowerCoder

@DannyIsCoding Thank you! I'm glad you enjoyed it :D!

Profile icon
Leroy01010

making virus's for people to download i'm innocent with this

Profile icon
lurking11

it didn't work for me , using chrome on manjaro linux distro
anyway well done.

Profile icon
PowerCoder

@lurking11 Hmmm... weird it works for me.

image
Anyways, thanks you.

Profile icon
[deleted]

cool!

Profile icon
[deleted]

it doesn't work

Profile icon
PowerCoder

@Zuhdi28 The demo?

Profile icon
[deleted]
Profile icon
Navinor

@Zuhdi28 It works! Wdym?

Profile icon
NoelB33

It works fine @Zuhdi28

Profile icon
Buhron
Profile icon
JediMinecraft1

hmmmmm