Creating Gradient Link Buttons Using HTML/CSS

In web design, link buttons serve as interactive elements that guide users to navigate to other pages or websites. To provide a more user-friendly and visually appealing experience, gradient link buttons have emerged. By utilizing HTML and CSS, we can easily achieve this unique effect, allowing buttons to possess not only functionality but also artistic flair.

Here is the specific code:

HTML

<button class="connectBtn">
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" fill="white"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"></path></svg>
  Connect
</button>

CSS

.connectBtn {
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  font-weight: 600;
  background: linear-gradient( to right,#8be3fc,#576bff);
  box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.connectBtn:hover {
  box-shadow: none;
  transform: translate(0px, 2.2px);
}

.connectBtn:active {
  transform: scale(0.96) translate(0px, 3.2px);
}

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>
    .connectBtn {
      width: 120px;
      height: 40px;
      border: none;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: white;
      font-weight: 600;
      background: linear-gradient(to right, #8be3fc, #576bff);
      box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);
      transition: all 0.3s ease-in-out;
      cursor: pointer;
    }

    .connectBtn:hover {
      box-shadow: none;
      transform: translate(0px, 2.2px);
    }

    .connectBtn:active {
      transform: scale(0.96) translate(0px, 3.2px);
    }
  </style>
</head>

<body>


  <button class="connectBtn">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512" fill="white">
      <path
        d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z">
      </path>
    </svg>
    Connect
  </button>

</body>

</html>

THE END