Implement a download button using HTML/CSS

picture[1]-Implement a download button using HTML/CSS - PANDA-PANDA

In web design, there are instances when we need to provide users with the functionality to download files. However, how can we make it easy for users to find and download these files? The answer is to add a download button. In CSS, we can achieve the effect of adding a download button by setting styles.

Below is the specific code:

HTML

<button class="cssbuttons-io-button">
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M1 14.5a6.496 6.496 0 0 1 3.064-5.519 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0 1-2.936 12L7 21c-3.356-.274-6-3.078-6-6.5zm15.848 4.487a4.5 4.5 0 0 0 2.03-8.309l-.807-.503-.12-.942a6.001 6.001 0 0 0-11.903 0l-.12.942-.805.503a4.5 4.5 0 0 0 2.029 8.309l.173.013h9.35l.173-.013zM13 12h3l-4 5-4-5h3V8h2v4z" fill="currentColor"></path></svg>
  <span>Download</span>
</button>

CSS

.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 0.8em 1.5em 0.8em 1.2em;
  color: white;
  background: #ad5389;
  background: linear-gradient(0deg, rgba(77,54,208,1) 0%, rgba(132,116,254,1) 100%);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;
  letter-spacing: 0.05em;
  border-radius: 20em;
}

.cssbuttons-io-button svg {
  margin-right: 8px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;
}

.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #4d36d0be;
}

HTML & CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .cssbuttons-io-button {
      display: flex;
      align-items: center;
      font-family: inherit;
      font-weight: 500;
      font-size: 17px;
      padding: 0.8em 1.5em 0.8em 1.2em;
      color: white;
      background: #ad5389;
      background: linear-gradient(0deg, rgba(77, 54, 208, 1) 0%, rgba(132, 116, 254, 1) 100%);
      border: none;
      box-shadow: 0 0.7em 1.5em -0.5em #4d36d0be;
      letter-spacing: 0.05em;
      border-radius: 20em;
    }

    .cssbuttons-io-button svg {
      margin-right: 8px;
    }

    .cssbuttons-io-button:hover {
      box-shadow: 0 0.5em 1.5em -0.5em #4d36d0be;
    }

    .cssbuttons-io-button:active {
      box-shadow: 0 0.3em 1em -0.5em #4d36d0be;
    }
  </style>
</head>

<body>
  <button class="cssbuttons-io-button">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0h24v24H0z" fill="none"></path>
      <path
        d="M1 14.5a6.496 6.496 0 0 1 3.064-5.519 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0 1-2.936 12L7 21c-3.356-.274-6-3.078-6-6.5zm15.848 4.487a4.5 4.5 0 0 0 2.03-8.309l-.807-.503-.12-.942a6.001 6.001 0 0 0-11.903 0l-.12.942-.805.503a4.5 4.5 0 0 0 2.029 8.309l.173.013h9.35l.173-.013zM13 12h3l-4 5-4-5h3V8h2v4z"
        fill="currentColor"></path>
    </svg>
    <span>Download</span>
  </button>
</body>

</html>
THE END
Like 15 Share
comment
头像
Your valuable insights are welcome!
Submit
头像

Nickname

cancel
NicknameSmiliesCodeimage

    No comments yet