0

I have made a download button but I also want to add a function that when clicked on in it downloads .zip files.

My code:

<style>
.download {
  width: 280px;
  background-color: DodgerBlue;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.download:hover {
  background-color: RoyalBlue;
  color: white;
}
.download:active {
  background-color: RoyalBlue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<body>
<button class="download"><i class="fa fa-download"></i> <b>Download Source Code Files</b></button>
</body>
James Z
  • 12,209
  • 10
  • 24
  • 44
Harsh Sharma
  • 37
  • 5
  • make it a link, then add the download attribute, or open it in new window if it has content-disposition headers set etc – Lawrence Cherone Sep 27 '21 at 16:17
  • Hi ! Sorry, but you provide us only presentation part, without any code, any fonction you tried to achieve the download. – Philippe Sep 27 '21 at 16:18
  • Please edit your question and add in the relevant code segment that demonstrates your best attempt at resolving this yourself and then explain at what point in your code you aren't getting the results you expect. The code you have in your question right now has nothing to do with the logic required for downloading a file, or it's missing details that would help us answer the question. We need to see what you're attempting to do in order to be helpful. Otherwise, this is just a wide open question with no details. – devlin carnate Sep 27 '21 at 16:20

2 Answers2

1

To download a .zip file just put the url in a link, like below: 

.download {
  width: 280px;
  text-decoration: none;
  background-color: DodgerBlue;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: white;
}
.download:hover {
  background-color: RoyalBlue;
  color: white;
}
.download:active {
  background-color: RoyalBlue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<br><a href="https://www.example.com/example.zip" class="download"><i class="fa fa-download"></i> <b>Download Source Code Files</b></a>

Just make sure to replace the url with your zip file.

PersonWhoIsStuck
  • 133
  • 1
  • 7
1

You are gonna need an <a></a> and use it like this :

<a download="1" `href`="2">Download</a>

1 -> Here u will put the name you want your downloaded file to have 2 -> Here u will put the path from the file u want to download

PedalaDauPenala
  • 24
  • 4