Pixel Fill Button: CSS Hover Effect

Pixel Fill Button

The fill dithers in like an old game screen: a quarter of the pixels, then half, then three quarters, then all. Four checker layers whose colors are registered properties on stepped delays.

Also known as: dither fill hover, 8-bit button hover, retro pixel button.

Color Base size 16px Dark background Hold hover state

HTML

<button class="hfx-pixel-fill">Press start</button>

CSS

@property --hfx-pixel-fill-a { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --hfx-pixel-fill-b { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --hfx-pixel-fill-c { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --hfx-pixel-fill-d { syntax: "<color>"; inherits: false; initial-value: transparent; }
.hfx-pixel-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.2em;
  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.01s linear 0.2s;
}
/* a 2x2 ordered dither: each layer paints one cell of every 2x2 block */
.hfx-pixel-fill::before {
  --p: 0.5em;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-a) 0) 0 0,
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-b) 0) var(--p) var(--p),
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-c) 0) var(--p) 0,
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-d) 0) 0 var(--p);
  background-size: calc(2 * var(--p)) calc(2 * var(--p));
  transition: --hfx-pixel-fill-a 0.01s 0.3s, --hfx-pixel-fill-b 0.01s 0.2s, --hfx-pixel-fill-c 0.01s 0.1s, --hfx-pixel-fill-d 0.01s;
}
.hfx-pixel-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.01s linear 0.2s, background-color 0s 0.35s;
}
.hfx-pixel-fill:is(:hover, :focus-visible)::before {
  --hfx-pixel-fill-a: var(--c);
  --hfx-pixel-fill-b: var(--c);
  --hfx-pixel-fill-c: var(--c);
  --hfx-pixel-fill-d: var(--c);
  transition: --hfx-pixel-fill-a 0.01s, --hfx-pixel-fill-b 0.01s 0.1s, --hfx-pixel-fill-c 0.01s 0.2s, --hfx-pixel-fill-d 0.01s 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .hfx-pixel-fill, .hfx-pixel-fill *, .hfx-pixel-fill::before, .hfx-pixel-fill::after, .hfx-pixel-fill *::before, .hfx-pixel-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.

Pixel Fill Button

HTML

CSS

Customizing this snippet

Similar hover effects