Click Animation to a Link Button Using CSS

Adding a click animation to a link button using CSS enhances user interaction by providing visual feedback when the button is clicked.

You can achieve this effect using the :active pseudo-class along with the transform property. Below is a basic example where the link button scales down slightly when clicked:

</>
Copy
/* Click animation for link button */
a.click-effect {
  display: inline-block;
  text-decoration: none;
  color: white;
  background-color: #007BFF;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  transition: transform 0.1s ease-in-out;
}

a.click-effect:active {
  transform: scale(0.95);
}

Examples

Example 1. Basic Click Animation on a Link Button

In this example, the link button shrinks slightly when clicked, providing a press-down effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a.click-effect {
      display: inline-block;
      text-decoration: none;
      color: white;
      background-color: #007BFF;
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
      transition: transform 0.1s ease-in-out;
    }

    a.click-effect:active {
      transform: scale(0.95);
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="click-effect">Click Me</a></p>
</body>
</html>

Example 2. Bounce Effect on Click

In this example, we use CSS animations to create a bounce effect when the link button is clicked.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    @keyframes bounce {
      0% { transform: scale(1); }
      50% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }

    a.bounce-effect {
      display: inline-block;
      text-decoration: none;
      color: white;
      background-color: #28a745;
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
      transition: transform 0.1s ease-in-out;
    }

    a.bounce-effect:active {
      animation: bounce 0.2s ease-in-out;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="bounce-effect">Click Me</a></p>
</body>
</html>

Output:

Conclusion

Using the :active pseudo-class and transform property, you can create engaging click animations for link buttons. Whether you prefer a subtle scale-down effect or a bouncy animation, CSS provides flexible options to enhance user experience.