About this block

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.

When to use

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

• Cards to give the buttons a containing surface and show them in a realistic layout context
• Badges as a status indicator sitting above the row to set visual hierarchy before the actions

After

• Alerts to show feedback messages that follow after a button action is triggered
• Interactive Buttons if you need richer state changes like loading or success transitions beyond the tilt

What you can customize

Any of the five variant slots can hold a different label or be removed to match your actual action set:

• Variant selection. Keep only the roles you use. A flow that only needs a primary and a destructive confirm can drop the other three without any adjustment.
• Label copy. Replace the generic labels with the real action names in your product so the button set reads as live UI from the start.
• Row layout. The wrapping flex row adapts to narrow containers, so you can embed this set inside a card or a sidebar column without added markup.

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.