You Might Also Like

See all ->

Liquid Button

Pulse Button

Like Burst Button

Wishlist Heart Button

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Interactive Hover Button — Free HTML CSS JS Fill Snippet

Interactive Hover Button · Buttons · Plain HTML, CSS & JS · Live preview

Share & Support

What's included

Features

Dot-to-fill wipe
A scaled dot floods the button color.
GPU-friendly scale
One small element grows, clipped by the pill.
Sliding label swap
Resting label out, hover label in.
Arrow nudge
The icon advances for forward intent.
Crisp hover label
Sits above the fill via z-index.
Synced easing
Fill and label arrive together.
Click confirmation
Brief On it state on press.
Real button element
Keyboard-focusable and accessible.

About this UI Snippet

Interactive Hover Button — Dot Expands to Flood the Fill

Screenshot of the Interactive Hover Button snippet rendered live

The interactive hover button is the slick call to action where a small accent dot expands on hover to flood the entire button with color, while the resting label slides out and a fresh label with an arrow slides in over the new fill. It is compact and tactile. This snippet builds it with pure CSS, plus a couple of JavaScript lines for a click confirmation.

The dot that becomes the fill

At rest, a tiny 9px accent dot sits beside the label. On hover it is scaled up dramatically — transform: scale(40) — so it grows from a dot into a circle far larger than the button, flooding the background with the accent color. Because the button has overflow: hidden and a pill radius, you only see the dot fill the rounded shape, not the giant circle beyond it. Scaling a single small element is a cheap, GPU-friendly way to produce a full-button color wipe without animating width or a separate background layer.

Swapping the label

Two labels share the button. The resting .ih-label slides out to the right and fades on hover (translateX(110%)), while a second .ih-slide label — containing the text plus an arrow — starts off to the left and slides in to center (translateX(0)) over the new colored fill. The crossfade-by-sliding makes the button feel like it transforms into its active state rather than just changing color, and the arrow nudges right to reinforce forward intent. Both move on the same cubic-bezier easing as the dot, so the fill and the label arrive together.

Why two labels instead of one

Keeping a separate hover label lets you change the wording or add the arrow on hover, and it sits above the expanding dot via z-index so it stays crisp white over the accent fill. A single label could not both slide away and reappear styled for the filled state, so the two-label pattern is what enables the polished swap.

The click confirmation

The hover effect is entirely CSS; JavaScript only adds feedback on click, briefly swapping the hover label to "On it…" before restoring it — a lightweight stand-in for whatever action the button triggers. Drop your real handler here and keep or remove the confirmation.

Accessibility note

The control is a real <button>, so it is keyboard-focusable and announces correctly. Because the visual change is hover-driven, ensure the resting state already communicates the action (it does — the label is visible at rest), so keyboard and touch users are not relying on the hover swap to understand it.

Customizing it

Change the accent color of the dot and fill, adjust the scale value to match larger buttons (it must be big enough to overflow the widest dimension), retime the slide, change the hover label text, or swap the arrow for an icon. Make it a link by changing the element. Pair it with a shimmer button or a pulse button for a coordinated set of CTAs.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not have to work out the geometry of the dot-to-fill wipe by staring at the transitions. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain precisely why scale(40) on a 9px dot combined with overflow hidden produces a clean full-button color flood instead of a visible circle edge, or why the resting label and the hover label both need to move on the same cubic-bezier curve to feel synced. The same assistant can help you optimize it, for instance checking whether scaling such a small element really is cheaper for the compositor than animating a background color or a clip-path, especially across many buttons on one page. It is equally useful for extending the pattern, such as making the scale value responsive to the button's own width instead of a fixed number, adding a second accent dot that wipes from the opposite corner, or driving the click confirmation text from a real async action with a loading and success state instead of a fixed timeout. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build an "interactive hover button" in plain HTML, CSS, and JavaScript using only a CSS transform scale trick for the hover fill — no background-color transition, no clip-path animation, no canvas.

Requirements:
- A pill-shaped button with overflow hidden and a fixed minimum width, containing a small circular accent dot (roughly 9px) positioned beside a resting label.
- On hover, the dot must scale up via transform: scale() to a value large enough that the resulting circle fully covers the button's largest dimension, flooding the button with color while staying clipped to the pill shape by the button's overflow hidden.
- The original resting label must slide out (via translateX) and fade out on hover, while a second, absolutely positioned label (containing new text plus an arrow icon) starts off-screen on the opposite side and slides in to center over the color fill. Both labels and the dot must share the same transition duration and easing curve so they all appear to move together.
- The second label must sit above the scaling dot with a higher z-index so it stays legible over the fill.
- Add a small arrow element inside the incoming label that nudges further in the hover direction on hover, using its own transition.
- Add a minimal JavaScript click handler that temporarily swaps the incoming label's text to a short confirmation message and restores the original text after roughly one second, without affecting the CSS-only hover mechanism.
- Use a real button element (not a div) so it is keyboard-focusable and reads correctly to assistive tech, and make sure the resting (non-hover) label already communicates the button's action on its own.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA pill button shows a small accent dot and a label.
  2. 2
    Hover the buttonThe dot expands to flood the button with color.
  3. 3
    Watch the label swapThe label slides out and a new label with an arrow slides in.
  4. 4
    Click itThe label briefly confirms with On it.
  5. 5
    Resize the buttonIncrease the dot scale so the fill overflows.
  6. 6
    Recolor and retextChange the accent and the hover label.

Real-world uses

Common Use Cases

Primary CTAs
Pair with a shimmer button elsewhere.
Hero actions
Place under a lamp header title.
Pricing buttons
The action on a pricing card.
Signup flows
A tactile alternative to a loading button.
Landing CTAs
Coordinate with a pulse button.
Hover button demos
A reference for dot-expand fill effects.

Got questions?

Frequently Asked Questions

On hover the small accent dot is scaled up with transform: scale(40), growing into a circle far larger than the button. Because the button has overflow: hidden and a pill radius, you only see the dot flood the rounded shape. Scaling one small element is a cheap, GPU-friendly way to wipe the button with color without animating width or a separate layer.

One label is the resting state and slides out on hover; the second contains the hover text plus an arrow and slides in over the colored fill, sitting above the expanding dot via z-index so it stays crisp. A single label could not both slide away and reappear styled for the filled state, so two labels enable the polished swap.

Yes — the dot scale must be large enough that the expanded circle overflows the button widest dimension, or the fill will not reach the corners. For a wider or taller button, increase the scale value (40 here) until the accent floods the entire pill on hover.

The control is a real button, so it is keyboard-focusable and announced correctly. The resting state already shows the label, so users who cannot hover still understand the action — the hover swap is an enhancement, not the only way to read the button. Keep your real action on the click handler.

The markup and CSS port directly as a Button component with two label spans. Handle click with a framework event that runs your action and optionally toggles the confirmation label. The hover effect needs no JavaScript. In Tailwind, build it with a scaling accent element, overflow-hidden, and group-hover translate utilities on the two labels.