Apply a Shaking Animation to a Link on Hover Using CSS

Adding a shaking animation to a link on hover using CSS makes it more engaging and interactive. This effect is commonly used for call-to-action links, warnings, or attention-grabbing links.

To apply a shaking animation to a link on hover using CSS, you can using the @keyframes animation combined with the transform property.

The following basic CSS code applies a simple shaking effect to a link when the user hovers over it:

</>
Copy
/* Shaking animation on hover */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

a.shake {
  display: inline-block;
  text-decoration: none;
  color: red;
  font-size: 18px;
  transition: transform 0.3s ease-in-out;
}

a.shake:hover {
  animation: shake 0.5s ease-in-out;
}

Examples

Example 1. Simple Shaking Effect on Hover

In this example, the link shakes horizontally when hovered, creating an attention-grabbing effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
    }

    a.shake {
      display: inline-block;
      text-decoration: none;
      color: red;
      font-size: 18px;
      transition: transform 0.3s ease-in-out;
    }

    a.shake:hover {
      animation: shake 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="shake">Hover Over Me</a></p>
</body>
</html>

Output:

Example 2. Stronger Shake Animation for an Alert Link

In this example, we create a more intense shake effect to make the link appear as an urgent call-to-action or alert.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    @keyframes strongShake {
      0% { transform: translateX(0); }
      10% { transform: translateX(-8px); }
      20% { transform: translateX(8px); }
      30% { transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      50% { transform: translateX(-8px); }
      60% { transform: translateX(8px); }
      70% { transform: translateX(-8px); }
      80% { transform: translateX(8px); }
      90% { transform: translateX(-8px); }
      100% { transform: translateX(0); }
    }

    a.strong-shake {
      display: inline-block;
      text-decoration: none;
      color: white;
      background-color: red;
      padding: 10px 15px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 5px;
      transition: transform 0.3s ease-in-out;
    }

    a.strong-shake:hover {
      animation: strongShake 0.6s ease-in-out;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="strong-shake">Urgent Action!</a></p>
</body>
</html>

Conclusion

Using the @keyframes animation and transform: translateX(), you can create engaging shake effects for links on hover. Whether you want a subtle shake for emphasis or a stronger shake for alerts, CSS provides flexible animation options. Try different intensities and durations to match your website’s design!