How to make a download button that downloads .zip files

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>

2 answers

  • answered 2021-09-27 16:19 PersonWhoIsStuck

    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.

  • answered 2021-09-27 16:26 PedalaDauPenala

    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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum