How to make a download button that downloads .zip files [duplicate]-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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.