Rotate Buttons
Buttons that rotate an icon or the whole label on hover. Add subtle motion to refresh, settings, and other action icons across your app today.
Buttons that rotate an icon or the whole label on hover. Add subtle motion to refresh, settings, and other action icons across your app today.
Search blocks by description or jump to a page.
Rotate Buttons shows five standard button variants arranged in a single centered, wrapping row. Each variant covers a common role: a filled primary action, a muted secondary action, a destructive warning action, a stroked outline action, and a minimal ghost action. When a visitor hovers any button, the whole button tilts a few degrees before snapping back, giving the row a light sense of life without changing color or shape.
Every button is independent. You can keep just the variants you need, change the label text, or drop a single button anywhere a standalone call to action is required. The row wraps naturally on smaller screens so the layout stays intact without extra work.
Reach for this block when you want to introduce motion feedback to a button set without committing to a strong visual effect like a fill sweep or a pulse glow. It fits well on course catalog pages, lesson dashboards, and enrolment flows in an online education platform where friendly, unobtrusive motion reinforces an approachable tone. It works equally well as a quick reference panel in a component library or style guide, letting teams preview every button role in one place.
A natural flow around it on a Components page:
Before
After
Any of the five variant slots can hold a different label or be removed to match your actual action set:
Tip: pair the rotate effect with a short transition duration so the tilt stays snappy; a slow rotation can feel heavy for small interactive elements.