Applying a Rotating Effect on Hover for a Link Using CSS

Adding a rotating effect to a link on hover using CSS enhances interactivity and makes your website more dynamic.

To add a rotating effect to a link on hover using CSS, you can use the transform: rotate() property.

The following basic CSS applies a rotation effect when the user hovers over the link:

</>
Copy
/* Rotate link on hover */
a.rotate {
  display: inline-block;
  text-decoration: none;
  color: blue;
  font-size: 18px;
  transition: transform 0.5s ease-in-out;
}

a.rotate:hover {
  transform: rotate(360deg);
}

Examples

Example 1. Basic Rotation Effect on Hover using CSS

In this example, we apply a full 360-degree rotation when the user hovers over the link.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a.rotate {
      display: inline-block;
      text-decoration: none;
      color: blue;
      font-size: 18px;
      transition: transform 0.5s ease-in-out;
    }

    a.rotate:hover {
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="rotate">Hover Over Me</a></p>
</body>
</html>

Output:

Example 2. Rotating an Icon Inside a Link using CSS

In this example, only the icon inside the link rotates while the text remains stationary.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    a.rotate-icon {
      text-decoration: none;
      color: black;
      font-size: 18px;
      display: flex;
      align-items: center;
    }

    a.rotate-icon i {
      margin-left: 5px;
      transition: transform 0.5s ease-in-out;
    }

    a.rotate-icon:hover i {
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="rotate-icon">Hover Over Me <i>↻</i></a></p>
</body>
</html>

Output:

Example 3. Continuous Rotation Animation on Hover using CSS

In this example, we make the link continuously rotate while the user hovers over it using CSS animations.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    @keyframes rotateLoop {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    a.rotate-loop {
      display: inline-block;
      text-decoration: none;
      color: green;
      font-size: 18px;
      transition: transform 0.5s ease-in-out;
    }

    a.rotate-loop:hover {
      animation: rotateLoop 1s infinite linear;
    }
  </style>
</head>
<body>
  <p><a href="https://www.example.com" class="rotate-loop">Hover Over Me</a></p>
</body>
</html>

Output:

Conclusion

Using the transform: rotate() property, you can create engaging rotation effects for links on hover. Whether you want a simple rotation, an icon-only rotation, or a continuous animation, CSS provides flexible options. Try different variations to match your website’s design and enhance user experience!