Creating Slow Fill Gradient Buttons Using HTML/CSS-PANDA

With HTML and CSS, we can achieve a unique button effect – Slow Fill Gradient Buttons. These buttons gradually fill with a gradient color after a user’s click, creating a dynamic and visually engaging effect.

Here is the specific code:

HTML

<button class="button">
  Hover me!
</button>

CSS

.button {
  font-size: 17px;
  font-weight: bold;
  border: 0px;
  color: white;
  background-color: #1877f2;
  padding: 1rem 2rem;
  border-radius: 15px;
  cursor: pointer;
}

.button:hover {
  background-image: linear-gradient(90deg,
		#B799FF 0%,
		#ACBCFF 50%,
		#AEE2FF 75%,
		#E6FFFD 100%);
  color: black;
  animation: slide 10s linear infinite;
}

@keyframes slide {
  100% {
    background-position: 50rem;
  }
}

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>
    .button {
      font-size: 17px;
      font-weight: bold;
      border: 0px;
      color: white;
      background-color: #1877f2;
      padding: 1rem 2rem;
      border-radius: 15px;
      cursor: pointer;
    }

    .button:hover {
      background-image: linear-gradient(90deg,
          #B799FF 0%,
          #ACBCFF 50%,
          #AEE2FF 75%,
          #E6FFFD 100%);
      color: black;
      animation: slide 10s linear infinite;
    }

    @keyframes slide {
      100% {
        background-position: 50rem;
      }
    }
  </style>
</head>

<body>

  <button class="button">
    Hover me!
  </button>

</body>

</html>

THE END