GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Icon Button CSS Patterns — Press, Drag, Expand

· Godrich · 9 items · 21 min read

ButtonsVanilla JSSCSSClickNavigation

An icon button css pattern trades the label for a picture, so the meaning has to survive for anyone who never sees it.

Speed dial that turns 45 degrees to hand out actions01 icon-fab-speed-dial Toolbar FABs that read which way you scroll02 icon-fab-scroll-toolbar Icon ripple spreading from the exact press point03 icon-btn-point-ripple Favorite star that draws its line, then fills04 icon-btn-star-draw Theme button where the sun and moon trade places05 icon-btn-theme-morph Close button with a ring that keeps circling06 icon-btn-close-ring Search FAB that unfolds into an input07 icon-fab-search-open Help button that opens a chat launcher08 icon-fab-chat-help FAB that follows your long-press drag09 icon-fab-drag-move

Auto-plays · click a tile to jump to its section · all nine in one zip

The order runs from the widest job a button can hold, down to the smallest. First come the two that own the whole screen: one press splits into three actions (01), and a row of tools steps aside while you read (02). The next four differ only in how they answer a press — a wave starts at the pixel you touched (03), a star traces its outline before it fills (04), a sun and a moon swap seats (05), and a close mark spins a ring under the pointer (06). The last three change the button itself: an icon widens into a text field (07), a launcher drags a chat panel up with it (08), and a long press hands you the button to carry somewhere else (09). Where an icon button animation css trick ends and a script begins is exactly here, since anything that moves or reads the scroll needs someone to hold the value. What unfolds after the press is the axis button state css patterns dig into, and drawing the wait itself is the job of the AI chat loading animations.

01Speed dial that turns 45 degrees to hand out actions

What you see

One create button cannot hold writing, photos, and voice at the same time unless it splits after the press. The plus mark turns 45 degrees into a close mark while three labeled buttons rise 40ms apart, and whether it is open or shut is written to aria-expanded rather than guessed from a class name.

Speed dial that turns 45 degrees to hand out actions
Open in a new tab

01 · Speed dial that turns 45 degrees to hand out actions — Measured area 12.706% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-expandedrotate(45deg)transition-delay

Where to look in the code

Escape closes it, and 9 of the 24 preview frames carry movement.

.sd__sub {
  transform: translateY(12px) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1),
              opacity 140ms linear;
}
.sd.is-open .sd__sub {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sd__item:nth-child(2) .sd__sub { transition-delay: 40ms; }
.sd__item:nth-child(3) .sd__sub { transition-delay: 80ms; }
.sd__plus { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sd.is-open .sd__plus { transform: rotate(45deg); }

02Toolbar FABs that read which way you scroll

How an icon button ui design hides with the scroll

Tools that cover the paragraph you are reading stop being tools. This part compares scrollTop against its last value: a rising number means you are going down, so the bar of three round buttons leaves by translateY(150%), and a falling number brings it straight back.

Toolbar FABs that read which way you scroll
Open in a new tab

02 · Toolbar FABs that read which way you scroll — Measured area 14.57% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

scrollToptranslateYaria-label

How to read the code

A 2px threshold keeps a trembling finger from flipping the bar on every pixel.

var tbLast = tbView.scrollTop;
tbView.addEventListener('scroll', function () {
  var now = tbView.scrollTop;
  var down = now - tbLast > 2;
  var up = tbLast - now > 2;
  tbLast = now;
  if (down && !tb.classList.contains('is-hidden')) {
    tb.classList.add('is-hidden');
  } else if (up && tb.classList.contains('is-hidden')) {
    tb.classList.remove('is-hidden');
  }
});
document.getElementById('tb-top').addEventListener('click', function () {
  tbView.scrollTo({ top: 0, behavior: 'smooth' });
});

03Icon ripple spreading from the exact press point

What moves

A wave that always starts dead center throws away the one thing the press knew, which is where it landed. pointerdown measures the point against the button's getBoundingClientRect(), writes it into --x and --y, and a 16px circle grows from there by scale(9) over 600ms before it is removed.

Icon ripple spreading from the exact press point
Open in a new tab

03 · Icon ripple spreading from the exact press point — Measured area 5.137% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

pointerdown--xscale

What to change

Nothing in that path touches layout, since only transform and opacity change.

.rp__wave,
.rp__seed {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 247, 230, 0.5);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
@keyframes rp-grow {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
  70% { opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(9); opacity: 0; }
}

04Favorite star that draws its line, then fills

What you see

A star that turns yellow in an instant reports the result but never shows the act. The outline travels from stroke-dashoffset: 100 to zero across 460ms, and the filled copy sits behind a 0ms 460ms delay so it appears the moment the line closes, not while the line is still being drawn.

Favorite star that draws its line, then fills
Open in a new tab

04 · Favorite star that draws its line, then fills — Measured area 15.502% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

stroke-dashoffsetsteps(1, end)aria-pressed

Where to look in the code

The preview moves in 16 of its 24 frames, and the card background takes the same yellow at that instant.

.st__draw path {
  fill: none;
  stroke: #17141a;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 460ms ease-out;
}
.st__fill {
  opacity: 0;
  transition: opacity 0ms 460ms;
}
.st.is-on .st__draw path { stroke-dashoffset: 0; }
.st.is-on .st__fill { opacity: 1; }

05Theme button where the sun and moon trade places

What happens on screen

Cross-fading a sun into a moon produces a frame where both are half there, and that ghost is exactly what a poster grab picks up. Both icons share one grid cell and swap through transition: opacity 0ms, while the card and the day/night label behind them are cut by steps(1, end); rotation and scale keep their easing and stay smooth.

Theme button where the sun and moon trade places
Open in a new tab

05 · Theme button where the sun and moon trade places — Measured area 17.817% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

steps(1, end)aria-pressedrotate

How to read the code

It carries the second-largest single-frame change of the nine, at 17.81% of the stage.

.tm__sun,
.tm__moon {
  position: absolute;
  grid-area: 1/1;
  transition: opacity 0ms, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tm__moon { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.tm.is-dark .tm__sun { opacity: 0; transform: rotate(90deg) scale(0.4); }
.tm.is-dark .tm__moon { opacity: 1; transform: rotate(0deg) scale(1); }
.tm.is-dark .tm__disc { transform: rotate(180deg); }

06Close button with a ring that keeps circling

What moves

A close mark small enough to sit on a chip is also small enough to look like decoration. A dashed ring wraps it and turns once every 900ms, but only while the pointer hovers or :focus-visible lands, so a keyboard visitor is handed the same signal as a mouse visitor.

Close button with a ring that keeps circling
Open in a new tab

06 · Close button with a ring that keeps circling — Measured area 1.828% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

:focus-visiblerotatearia-label

What to change

Nothing but the ring moves here, which is why the card is held to 252px and the button pushed out to 56px.

.cl__ring {
  position: absolute;
  inset: 0;
  border: 3px dashed currentColor;
  border-radius: 50%;
  opacity: 0.35;
}
.cl__btn:hover .cl__ring,
.cl__btn:focus-visible .cl__ring {
  opacity: 1;
  animation-name: cl-spin;
  animation-duration: 900ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes cl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

07Search FAB that unfolds into an input

What you see

A magnifier can only become a text field if the widths in between actually exist. --w is registered through @property as a <length>, so the pill flows from 48px to 264px instead of snapping, and focus enters the field with preventScroll once the width lands.

Search FAB that unfolds into an input
Open in a new tab

07 · Search FAB that unfolds into an input — Measured area 10.802% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

@propertyaria-expandedpreventScroll

Where to look in the code

Escape empties the field and folds the pill back to a circle.

@property --w {
  syntax: "<length>";
  inherits: false;
  initial-value: 48px;
}
.se__pill {
  --w: 48px;
  box-sizing: border-box;
  width: var(--w);
  height: 48px;
  border-radius: 999px;
  transition: --w 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 140ms linear;
}

08Help button that opens a chat launcher

What happens on screen

A contact link that navigates away costs the reader the screen they were standing on. Here, a 148px panel lifts into place above the FAB with translateY, the line you send becomes a real bubble in the log, and the spot where the answer arrives is announced through aria-live.

Help button that opens a chat launcher
Open in a new tab

08 · Help button that opens a chat launcher — Measured area 27.706% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-expandedtranslateYaria-live

How to read the code

It is the biggest arrival in this set, changing 26.31% of the stage in one frame.

function chAdd(text, who) {
  var p = document.createElement('p');
  p.className = 'ch__bubble ch__bubble--' + who;
  p.textContent = text;
  chLog.appendChild(p);
  return p;
}
chFab.addEventListener('click', function () {
  ch.classList.toggle('is-open');
  var open = ch.classList.contains('is-open');
  chFab.setAttribute('aria-expanded', open ? 'true' : 'false');
  if (open) window.setTimeout(function () {
    chInput.focus({ preventScroll: true });
  }, 240);
});

09FAB that follows your long-press drag

What moves

Sometimes the floating button parks itself on the exact sentence you wanted to read. A press held past 350ms flips it into grab mode, setPointerCapture keeps the move events coming even when the finger slides off the circle, and the button rides translateX under it.

FAB that follows your long-press drag
Open in a new tab

09 · FAB that follows your long-press drag — Measured area 10.568% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

pointerdowntranslateXaria-label

What to change

Releasing measures which half of the stage you are on and snaps to that edge, while a press that never reaches 350ms stays an ordinary click.

function dgSnap(x) {
  var side = dgSide(x);
  var box = dgScreen.getBoundingClientRect();
  var maxX = box.width - dgFab.offsetWidth - 8;
  dgFab.style.transform = 'translateX(' + (side === 'left' ? 0 : maxX) + 'px)';
}
dgFab.addEventListener('pointerdown', function (e) {
  dgHold = window.setTimeout(function () {
    dgGrab = true;
    dgFab.classList.add('is-grab');
    dgScreen.classList.add('is-holding');
    try { dgFab.setPointerCapture(e.pointerId); } catch (err) { }
  }, 350);
});
dgFab.addEventListener('pointerup', function (e) {
  dgClearHold();
  dgScreen.classList.remove('is-holding');
  if (!dgGrab) return;
  dgGrab = false;
  dgFab.classList.remove('is-grab');
  dgSnap(e.clientX);
});

Where it breaks — the trap

The break that shows up first is a control with no name at all. Six of the nine hold nothing but a glyph, and a glyph with no accessible name is read out as "button" and nothing else. Every one of them therefore got an aria-label, and the ones that toggle rewrite that label to match the state: the speed dial says "Open the create menu" while shut and "Close the create menu" while open. The theme button in 05 follows the same rule from the other side — its name describes what the next press will produce, not what you are currently looking at.

The second is a fade standing where a cut belongs. The first build of 05 cross-faded the sun into the moon, and the 24-frame poster pass grabbed the one frame where both were half visible. Cutting visibility into a single frame killed the ghost and immediately created a second problem, because a pure cut leaves only two or three frames with anything in them. Widening the disc's 180-degree turn on both sides of the cut brought the item back to 10 moving frames.

The third is the exit stealing the poster. Item 01 is a story about opening, but three helper buttons leaving together changed more pixels than three arriving, so an empty corner won the first impression. Pulling the exits apart to 78, 84, and 90 percent and shrinking each one on the way out left an open frame standing. Item 06 failed in the opposite direction: a turning ring is the whole idea, so only 1.83% of the stage ever changes — the smallest figure in the set, and the reason its card and button were resized until the ring could carry a thumbnail.

Narrow screens break things last. Every part occupies a 480×300 slot on the page and drops to 320×200 on a phone, which leaves 174px of usable height once the stage padding is taken out, so at 320px each spacing value goes down and never up. The helper buttons in 01 give up their 168px minimum width for 140px, the chat panel in 08 goes from 148px to 112px, and 09 refuses to store its snap target as a number at all — it recomputes stage width minus button width on every release, because the button is a different size down there. Parts that change width, like the helper buttons in 01, have to be checked for layout shake too — and claiming the space up front is the opposite answer, which is what skeleton loading screens do. All nine sets live in one folder whose archive password is khf267ta, and the React build packed beside the vanilla one behaves the same way on the same numbers.

Accessibility (reduced-motion)

Under prefers-reduced-motion: reduce, every loop halts on a result instead of a blank: the speed dial rests open, the star rests drawn and filled, the theme button rests on the moon, and the draggable one rests grabbed at the left edge. Someone who switched motion off still has to be able to tell which state the button is in.

For icon buttons, the job splits cleanly into a name and a state. The name is aria-label; expanding goes to aria-expanded (01, 07, 08), pressed or not goes to aria-pressed (04, 05), and 08 adds aria-live for a reply that arrives without being asked for. Focus needs a guard as well, which is why 07 and 08 both call focus({ preventScroll: true }) — these parts run inside iframes on the grid page, and an unguarded call yanks the parent article along with it. In 06, the hover rule and the :focus-visible rule are written as one selector list, so nobody arriving by keyboard is given less than someone arriving by mouse.

Item By eye By screen reader Control
01 Speed dial plus turns 45° · three rise aria-expanded toggled click · Escape
02 Toolbar FABs bar leaves downward per-button aria-label scroll
03 Point ripple circle from the touched pixel alert button name pointer · Enter
04 Star draw line drawn, then filled aria-pressed · saved notice click
05 Theme button sun and moon swap aria-pressed · name rewritten click
06 Close ring dashed ring starts turning close button name hover · Tab focus
07 Search FAB circle widens into a field aria-expanded · field name click · Escape
08 Help FAB panel lifts into place aria-live reply notice click · Enter
09 Drag FAB snaps to the nearer edge position read out long-press drag · ←→

Naming a graphic-only control is spelled out in the MDN aria-label reference, and the registered custom property behind 07 is covered on the MDN @property page. Neighboring navigation parts are collected under the nav category, and the ones with real JavaScript behind them live under the JS category.

FAQ

How much contrast does an icon need?

An icon is a graphic, not text, so the bar is 3:1 against its background rather than the 4.5:1 that body text has to clear. Cream on near-black, as in the alert button in 03, sits far above that line, and so does near-black on a white card in 06. The yellow glyphs in 02 are the ones to watch, which is why they ride a dark bar instead of the page. Naming a control whose whole meaning is one check mark hits the same wall in custom checkbox animations.

Where should a floating action button sit?

The bottom right is the default because that is where a right thumb lands, but it is not a law. Left-handed people, tall phones, and a bottom tab bar all break it in different ways. That is the reason 09 exists at all: rather than choosing the spot for the reader, it lets them hold and move the button and then snaps it to the nearer edge. When moving is not on the table, clear the height of the bottom bar at the very least.

Can these icon button html css patterns work without JavaScript?

The visual half mostly can. Hover, focus, and a checkbox trick cover the ring in 06 and a large part of 04 and 05, and the width flow in 07 is pure CSS once --w is registered. What cannot be faked is reading coordinates for 03, comparing scroll positions for 02, and measuring a hold against 350ms for 09, so those three ship with the handful of lines you see above.

Enter the archive password

The password is inside this article. You will find it as you read.