Does this replace the live Button page?

No. Names, loading, disabled and the focus ring live there. This page is the icon-only case and any motion on the glyph.

Why do the tooltip and the aria-label have to match?

Voice control uses the words on screen. If they differ, click Archive can miss.

How much motion is too much?

If the icon is still moving when someone presses, it is too much.

There is no hover tooltip. The name in code still has to work. If the glyph is unclear, show a text label.

Is a 16 pixel icon a button?

The drawing can be 16. The target cannot. Pad it to 24, or 44 on touch.

Icon button

An icon button is a button with no visible text. The press still has to do one job and leave you on the page. The name lives in code, and a tooltip should say the same words.

Buttons and controlsBuild difficulty: Easyrotation

Also called Icon-only button, Toolbar button, Glyph button, Icon CTA.

Here it is working.

aria-label="Add block"

Hover the pill. The plus turns, the shell fills.

For designers

The live Button page owns the name in aria-label, the hidden SVG, and target size. The live Tooltip page owns the hover name. This page is extra motion on the glyph. A plus that turns into a check, an arrow that nudges. Fine on one spacious action. In a toolbar of 8, motion on every glyph is a slot machine. Pair the tooltip with the accessible name. When those two differ, voice control says the words on screen and nothing happens.

Use this when

Space is honestly tight: a toolbar, a table row, a compact header.
The glyph is familiar, or a tooltip can name it on hover and focus.
The target is at least 24 by 24 pixels, larger on touch.
Any motion on the icon is small, and reduced motion can skip it.

Reach for something else when

A short text label would fit. Use a labelled button. See the Button page.
The click loads another page. Use a link, even if you draw an icon on it.
You wanted a magnetic pull or a fill. Stay still, or use Magnetic button once on a hero.
The question is the hover name. Start with the Tooltip page.

How to build it

Start with a real button. Put the name in aria-label. Hide the SVG from the accessibility tree so the control does not get two names. Whatever the tooltip says, the name in code should say. If you animate the icon, animate a child: a short translate, a swap of two glyphs, a 90 degree turn. Keep it under 200 milliseconds. Do not move the hit target. Touch gets the resting glyph. Keyboard focus should look like the live Button focus ring. On reduced motion, show the final glyph with no tween.

Official GSAP

gsap.to rotation + backgroundColor.

gsap.to(icon, { rotation: 45, duration: 0.35, ease: 'power2.out' });
gsap.to(btn, { backgroundColor: '#26251d', color: '#f7f7f4', duration: 0.3 });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Does this replace the live Button page?: No. Names, loading, disabled and the focus ring live there. This page is the icon-only case and any motion on the glyph.
Why do the tooltip and the aria-label have to match?: Voice control uses the words on screen. If they differ, click Archive can miss.
How much motion is too much?: If the icon is still moving when someone presses, it is too much.
What about mobile?: There is no hover tooltip. The name in code still has to work. If the glyph is unclear, show a text label.
Is a 16 pixel icon a button?: The drawing can be 16. The target cannot. Pad it to 24, or 44 on touch.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Tooltip