AI CSS Animations

Color Swatch Picker Hover

A row of shades mixed from your accent: hovering one grows it with a spring, rings it in its own color and shows its shade number underneath. The selected shade carries a drawn check mark.

Also known as: color picker hover css, swatch hover effect, color palette selector.

HTML

<div class="hfx-color-swatches" role="group" aria-label="Shade">
  <button aria-label="Shade 100" data-shade="100"></button>
  <button aria-label="Shade 200" data-shade="200"></button>
  <button aria-label="Shade 300" data-shade="300"></button>
  <button aria-label="Shade 500" data-shade="500" aria-pressed="true"></button>
  <button aria-label="Shade 600" data-shade="600"></button>
  <button aria-label="Shade 700" data-shade="700"></button>
  <button aria-label="Shade 900" data-shade="900"></button>
</div>

CSS

.hfx-color-swatches {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  gap: 0.6em;
  padding-bottom: 1.3em;
  font-family: system-ui, sans-serif;
}
.hfx-color-swatches button {
  position: relative;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: inherit;
  outline: 2px solid transparent;
  outline-offset: 0.2em;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), outline-color 0.2s ease;
}
.hfx-color-swatches button:nth-child(1) { --sw: color-mix(in srgb, var(--c) 15%, #fff); }
.hfx-color-swatches button:nth-child(2) { --sw: color-mix(in srgb, var(--c) 32%, #fff); }
.hfx-color-swatches button:nth-child(3) { --sw: color-mix(in srgb, var(--c) 60%, #fff); }
.hfx-color-swatches button:nth-child(4) { --sw: var(--c); }
.hfx-color-swatches button:nth-child(5) { --sw: color-mix(in srgb, var(--c) 82%, #000); }
.hfx-color-swatches button:nth-child(6) { --sw: color-mix(in srgb, var(--c) 64%, #000); }
.hfx-color-swatches button:nth-child(7) { --sw: color-mix(in srgb, var(--c) 38%, #000); }
/* shade number */
.hfx-color-swatches button::after {
  content: attr(data-shade);
  position: absolute;
  top: calc(100% + 0.55em);
  left: 50%;
  font-size: 0.68em;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, -0.3em);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
/* the selected shade: ring plus a check drawn from two borders */
.hfx-color-swatches button[aria-pressed="true"] { outline-color: var(--sw); }
.hfx-color-swatches button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.72em;
  width: 0.45em;
  height: 0.8em;
  border: solid #fff;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
.hfx-color-swatches button:is(:hover, :focus-visible) {
  outline-color: color-mix(in srgb, var(--sw) 60%, transparent);
  transform: scale(1.18);
}
.hfx-color-swatches button:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

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

Tailwind CSS version

The same effect using Tailwind utility classes. No custom CSS or config needed.

<div class="flex gap-2.5 pb-5" role="group" aria-label="Shade">
  <button aria-label="Shade 100" data-shade="100" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-100 ring-transparent hover:ring-blue-100"></button>
  <button aria-label="Shade 200" data-shade="200" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-200 ring-transparent hover:ring-blue-200"></button>
  <button aria-label="Shade 300" data-shade="300" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-300 ring-transparent hover:ring-blue-300"></button>
  <button aria-label="Shade 500" data-shade="500" aria-pressed="true" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-500 ring-blue-500"><svg class="mx-auto h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></button>
  <button aria-label="Shade 600" data-shade="600" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-600 ring-transparent hover:ring-blue-600"></button>
  <button aria-label="Shade 700" data-shade="700" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-700 ring-transparent hover:ring-blue-700"></button>
  <button aria-label="Shade 900" data-shade="900" class="relative h-8 w-8 rounded-full ring-2 ring-offset-2 transition duration-300 hover:scale-110 after:absolute after:left-1/2 after:top-full after:mt-1.5 after:-translate-x-1/2 after:text-[10px] after:font-bold after:opacity-0 after:transition after:content-[attr(data-shade)] hover:after:opacity-100 bg-blue-900 ring-transparent hover:ring-blue-900"></button>
</div>

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.

Similar hover effects

Slide Fill Button
Fill Up Button
Skew Fill Button
Shine Sweep Button