Dot Expand Button: CSS Hover Effect

Dot Expand Button

A small dot sits beside the label; on hover it swells until it floods the whole pill. The dot is a real element behind the text, scaled with transform, so it stays sharp and cheap.

Also known as: dot to fill button, expanding dot hover, bullet grow button.

Color Base size 16px Dark background Hold hover state

HTML

<button class="hfx-dot-expand-fill"><span class="hfx-dot-expand-fill-dot" aria-hidden="true"></span><span class="hfx-dot-expand-fill-label">Get in touch</span></button>

CSS

.hfx-dot-expand-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 0.75em 1.6em 0.75em 1.25em;
  border-radius: 999em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease 0.1s, border-color 0.3s ease;
}
.hfx-dot-expand-fill-dot {
  position: relative;
  z-index: -1;
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-dot-expand-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  border-color: var(--c);
  color: #fff;
  transition: color 0.3s ease 0.1s, border-color 0.3s ease, background-color 0s 0.55s;
}
.hfx-dot-expand-fill-label { transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.hfx-dot-expand-fill:is(:hover, :focus-visible) .hfx-dot-expand-fill-dot { transform: scale(44); }
/* the dot is gone once it fills, so nudge the label back to the true center */
.hfx-dot-expand-fill:is(:hover, :focus-visible) .hfx-dot-expand-fill-label { transform: translateX(-0.4em); }

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

<button class="group relative isolate inline-flex items-center gap-2.5 overflow-hidden rounded-full border border-blue-500/35 py-3 pl-5 pr-6 font-semibold text-blue-500 transition-colors duration-300 hover:border-blue-500 hover:text-white">
  <span class="relative -z-10 h-2 w-2 flex-none rounded-full bg-blue-500 transition-transform duration-500 ease-in-out group-hover:scale-[44]" aria-hidden="true"></span>
  <span class="transition-transform duration-500 ease-in-out group-hover:-translate-x-1.5">Get in touch</span>
</button>

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.

Dot Expand Button

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar hover effects