Implementing Dynamic Effect Download Button Using HTML/CSS

In today’s digital era, the download function is an indispensable part of many websites and applications. The download button, as a key element triggering the download operation, has a significant impact on user experience through its design and dynamic effects. By using HTML and CSS, we can imbue the download button with dynamic effects, making it more appealing to users and enhancing the convenience of user operations.

Here is the specific code:

HTML

<button class="botao">
  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mysvg"><g id="SVGRepo_bgCarrier" stroke-width="0">
    </g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
       <g id="Interface / Download"> 
       <path id="Vector" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" stroke="#f1f1f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       </path>
    </g> </g>
  </svg>
  <span class="texto">Download</span>
</button>

CSS

.botao {
  width: 125px;
  height: 45px;
  border-radius: 20px;
  border: none;
  box-shadow: 1px 1px rgba(107, 221, 215, 0.37);
  padding: 5px 10px;
  background: rgb(47,93,197);
  background: linear-gradient(160deg, rgba(47,93,197,1) 0%, rgba(46,86,194,1) 5%, rgba(47,93,197,1) 11%, rgba(59,190,230,1) 57%, rgba(0,212,255,1) 71%);
  color: #fff;
  font-family: Roboto, sans-serif;
  font-weight: 505;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568));
  transition: .5s linear;
}

.botao .mysvg {
  display: none;
}

.botao:hover {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .5s linear;
}

.botao:hover .texto {
  display: none;
}

.botao:hover .mysvg {
  display: inline;
}

.botao:hover::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border: 3.5px solid transparent;
  border-top: 3.5px solid #fff;
  border-right: 3.5px solid #fff;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}

@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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>
    .botao {
      width: 125px;
      height: 45px;
      border-radius: 20px;
      border: none;
      box-shadow: 1px 1px rgba(107, 221, 215, 0.37);
      padding: 5px 10px;
      background: rgb(47, 93, 197);
      background: linear-gradient(160deg, rgba(47, 93, 197, 1) 0%, rgba(46, 86, 194, 1) 5%, rgba(47, 93, 197, 1) 11%, rgba(59, 190, 230, 1) 57%, rgba(0, 212, 255, 1) 71%);
      color: #fff;
      font-family: Roboto, sans-serif;
      font-weight: 505;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      filter: drop-shadow(0 0 10px rgba(59, 190, 230, 0.568));
      transition: .5s linear;
    }

    .botao .mysvg {
      display: none;
    }

    .botao:hover {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: .5s linear;
    }

    .botao:hover .texto {
      display: none;
    }

    .botao:hover .mysvg {
      display: inline;
    }

    .botao:hover::before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      width: 100%;
      height: 100%;
      border: 3.5px solid transparent;
      border-top: 3.5px solid #fff;
      border-right: 3.5px solid #fff;
      border-radius: 50%;
      animation: animateC 2s linear infinite;
    }

    @keyframes animateC {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>

  <button class="botao">
    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mysvg">
      <g id="SVGRepo_bgCarrier" stroke-width="0">
      </g>
      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
      <g id="SVGRepo_iconCarrier">
        <g id="Interface / Download">
          <path id="Vector" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" stroke="#f1f1f1" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
          </path>
        </g>
      </g>
    </svg>
    <span class="texto">Download</span>
  </button>

</body>

</html>

THE END