NewCSS + small JS · CSS grid · transition-delay

Pixel

The element fills in square pixels, appearing in random order, then empties the same way.

A free pixel fill hover effect in HTML and CSS (with a few lines of JavaScript). Also known as pixelated transition, 8-bit hover, pixel dissolve or retro pixel button.

Class: .CCPixel
Weight: 1.6 KB
Needs: CSS + a few lines of JS
Best for: Games, tech launches, retro brands

Tune it

Every snippet on this page follows these settings.

How the Pixel hover effect works

Script lays a grid of square cells behind the content, sized in whole pixels so they meet with no gaps.
Each cell gets a random delay, --d, between 0 and 1.
On hover every cell switches on after its own delay, so the fill appears in random blocks; on leave they switch off the same way.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCPixel">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Pixel on button, dropdown, card.

More ways to use it

The same class on badge.

The Pixel code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCPixel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color calc(.2s / var(--cc-speed)) calc(.25s / var(--cc-speed));
}
.CCPixel .CCPixel-g {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--px));
  grid-auto-rows: var(--px);
  pointer-events: none;
}
.CCPixel .CCPixel-g i {
  background: var(--cc-accent);
  box-shadow: 0 0 0 .6px var(--cc-accent);
  opacity: 0;
  transition: opacity 0s calc(var(--d) * .45s / var(--cc-speed));
}
.CCPixel:hover,
.CCPixel:focus-visible,
.CCPixel:focus-within { color: var(--cc-on-accent); }
.CCPixel:is(:hover, :focus-visible, :focus-within) .CCPixel-g i { opacity: 1; }
.CCPixel:is(:hover, :focus-visible, :focus-within) :is(.CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
@media (prefers-reduced-motion: reduce) { .CCPixel .CCPixel-g i { transition: none; } }

Show the JavaScript

document.querySelectorAll(".CCPixel").forEach(function (el) {
  if (el.dataset.ccPixel) return; el.dataset.ccPixel = 1;
  var grid = document.createElement("span");
  grid.className = "CCPixel-g"; grid.setAttribute("aria-hidden", "true"); el.appendChild(grid);
  function build() {
    var h = el.offsetHeight, w = el.offsetWidth, px = h <= 64 ? Math.ceil(h / 4) : 14;
    var cols = Math.ceil(w / px), rows = Math.ceil(h / px);
    grid.style.setProperty("--px", px + "px"); grid.style.setProperty("--cols", cols); grid.innerHTML = "";
    for (var i = 0; i < cols * rows; i++) { var c = document.createElement("i"); c.style.setProperty("--d", Math.random().toFixed(3)); grid.appendChild(c); }
  }
  build();
  if (window.ResizeObserver) new ResizeObserver(build).observe(el);
});

Pairs well with

Avoid on the same element Ember Sparks (clipping), Liquid Fill (fill), Ink Pour (fill), Northern Lights (fill), Stack Pop (fill), Metal (fill), Arrow Slide (fill), Sonar (clipping), Grain (fill), Goo (fill).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

Text turns to the on-accent colour as the pixels fill in.
Plays on keyboard focus too.
Fills all at once under reduced motion.

Performance

1.6 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Pixel

What is a pixel fill hover effect?

The element fills in square pixels, appearing in random order, then empties the same way. Pixel is a free pixel fill hover effect, also known as pixelated transition or 8-bit hover, that works on buttons, dropdowns, cards and more.

How do you make a pixel fill hover effect in CSS?

Script lays a grid of square cells behind the content, sized in whole pixels so they meet with no gaps. Each cell gets a random delay, --d, between 0 and 1. On hover every cell switches on after its own delay, so the fill appears in random blocks; on leave they switch off the same way.

How do I add Pixel to a button?

Add the class CCPixel next to CCButton, inside an element with the CCTheme class, then include the Pixel CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Pixel need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Pixel?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Pixel accessible?

Text turns to the on-accent colour as the pixels fill in. Plays on keyboard focus too. Fills all at once under reduced motion.

Can I use Pixel in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCPixel to a button or block, and paste the JavaScript into the footer code area.

Is Pixel free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.