Halftone Fill Button: CSS Hover Effect

Halftone Fill Button

A faint halftone texture at rest; on hover the dots swell until they merge into a solid fill. The dot radius is a registered @property length inside a tiled radial gradient.

Also known as: dot pattern fill hover, polka dot fill button, halftone hover effect.

Color Base size 16px Dark background Hold hover state

HTML

<button class="hfx-halftone-fill">Get the zine</button>

CSS

@property --hfx-halftone-fill-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.hfx-halftone-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.25s;
}
.hfx-halftone-fill::before {
  --hfx-halftone-fill-r: 0.035em;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, var(--c) var(--hfx-halftone-fill-r), transparent calc(var(--hfx-halftone-fill-r) + 0.03em)) 50% 50% / 0.5em 0.5em;
  transition: --hfx-halftone-fill-r 0.55s cubic-bezier(0.5, 0, 0.3, 1);
}
.hfx-halftone-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.25s, background-color 0s 0.55s;
}
.hfx-halftone-fill:is(:hover, :focus-visible)::before { --hfx-halftone-fill-r: 0.4em; }

@media (prefers-reduced-motion: reduce) {
  .hfx-halftone-fill, .hfx-halftone-fill *, .hfx-halftone-fill::before, .hfx-halftone-fill::after, .hfx-halftone-fill *::before, .hfx-halftone-fill *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Halftone Fill Button

HTML

CSS

Customizing this snippet

Similar hover effects