How to Create a Rotating Button Icon in CSS

Introduction

A rotating button icon is an interactive feature that rotates an icon within a button when hovered or clicked. This effect adds a modern and dynamic touch to your website, providing a visually appealing way to highlight important actions like "Submit" or "Next". You can achieve this using CSS transform and transition properties.

In this tutorial, you’ll learn how to create a button with a rotating icon using CSS.

Problem Statement

Create CSS code that:

Styles a button with an icon.
Rotates the icon on hover or when clicked.

Example:

Input: A button with an icon (e.g., an arrow or any Font Awesome icon).
Output: A button where the icon rotates when hovered.

Solution Steps

Use the <button> Element: Create a button with an icon using HTML.
Style the Button and Icon: Use CSS to define the button’s appearance and rotate the icon on hover.
Apply Rotation Effect on Hover: Use the transform: rotate() property to rotate the icon.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Button Icon</title>
    <!-- Font Awesome for the icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* Step 1: Style the button */
        .rotate-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px; /* Space between text and icon */
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* Step 2: Style the icon inside the button */
        .rotate-button i {
            transition: transform 0.3s ease; /* Smooth rotation transition */
        }

        /* Step 3: Rotate icon on hover */
        .rotate-button:hover i {
            transform: rotate(360deg); /* Rotate the icon by 360 degrees */
        }

        /* Optional: Change button background color on hover */
        .rotate-button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <!-- Button with rotating icon -->
        <button class="rotate-button">
            <span>Click Me</span>
            <i class="fas fa-sync-alt"></i> <!-- Font Awesome rotating icon -->
        </button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Button

The .rotate-button class is used to style the button, including padding, background color, and layout. The button uses display: flex to align the icon and text next to each other.

.rotate-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db; /* Blue background */
    padding: 12px 30px; /* Padding inside the button */
    border: none;
    border-radius: 5px; /* Rounded corners */
    display: flex; /* Flexbox to align text and icon */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between text and icon */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth color transition */
}

display: flex: This aligns the button's content (icon and text) horizontally.
gap: 10px: Adds space between the text and the icon.

Step 2: Style the Icon

The i element (Font Awesome icon) inside the button is styled with a transition for smooth rotation.

.rotate-button i {
    transition: transform 0.3s ease; /* Smooth rotation transition */
}

transition: transform 0.3s ease: Adds a smooth transition when the transform property is applied to rotate the icon.

Step 3: Rotate the Icon on Hover

When the button is hovered, the icon rotates 360 degrees using the transform property.

.rotate-button:hover i {
    transform: rotate(360deg); /* Rotate the icon by 360 degrees */
}

transform: rotate(360deg): This rotates the icon by 360 degrees when the button is hovered.

Optional: Change Background Color on Hover

You can also change the button’s background color on hover to make the effect more noticeable.

.rotate-button:hover {
    background-color: #2980b9; /* Darker blue background on hover */
}

Customization

Rotate in the Opposite Direction

To rotate the icon in the opposite direction (counterclockwise), change the degree to -360deg:

.rotate-button:hover i {
    transform: rotate(-360deg);
}

Rotate Continuously

To make the icon continuously rotate while hovered, use @keyframes to create an infinite animation:

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate-button:hover i {
    animation: spin 1s linear infinite; /* Continuous rotation */
}

Adjust Rotation Speed

You can adjust the speed of the rotation by changing the duration in the transition property. For example, to make the rotation slower:

.rotate-button i {
    transition: transform 0.6s ease; /* Slower rotation */
}

Conclusion

You can create a rotating button icon using CSS by applying the transform: rotate() property in combination with the :hover pseudo-class. This effect adds a dynamic and modern touch to your buttons, enhancing user experience by making interactions more engaging.

Java Guides

Search This Blog