Choose your plan
HoverFree
Background Slide
A two-colour gradient spanning 200% width slides from left to right in 0.5s on hover — position animation, pure CSS no pseudo-element.
Updated
Hover or click the scene to interact
This effect is free — the Hover category contains 48 effects total, including 5 free. Effect.Labs has 840 vanilla effects. Explore the category →
Usage examples
🍽 Collège Lucie Aubrac
Tuesday 12 November
Choose your level
Adapts to your current knowledge
How it works
The .fx-0344-root wrapper centres a 200 px button. The background is a horizontal linear gradient that places the resting colour (--bg-card) and indigo (#6366f1) side-by-side, each 50% wide, for a total width of 200%. At rest, background-position: left shows the dark half. On hover, background-position: right shifts the gradient one full width to the left, revealing indigo in 0.5 s with transition: all 0.5s ease. No pseudo-element, no extra layer — the background itself moves.
On hover, color: white keeps the text legible against indigo; :focus-visible triggers the same state. The technique works with any background (solid colour, more gradient stops) and any element size — just keep background-size: 200% 100%. Under reduced motion, the transition is removed but the colour state still changes instantly (guaranteed state feedback).
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the transition is disabled. The colour state changes instantly on hover and focus — indigo appears at once, without sliding. - Keyboard: the element is a natively focusable
<button>. The:focus-visiblerule triggers the same indigo background as hover, with a 2 px outline to signal keyboard focus. - Contrast: indigo on the light background of a light-theme site may be insufficient depending on the colour chosen — check the WCAG ratio (≥ 4.5:1 for normal text). On dark backgrounds, contrast is measured as sufficient.
- Touch: a tap activates the CSS hover state on most mobile browsers. The background stays indigo until focus moves elsewhere.
Browser compatibility
Pure CSS, no dependency. Properties: gradient background, background-size, background-position, transition, :focus-visible. Verified in Chromium and Firefox: sliding visible, two independent copies, 0 JS errors. :focus-visible requires Chrome 86+, Firefox 85+, Safari 15.4+.
Chrome 86+✓ Full (measured)
Firefox 85+✓ Full (measured)
Safari 15.4+✓ Full (:focus-visible)
Edge 86+✓ Full (Chromium engine)
Mobile iOS 15.4+✓ Full
Android Chrome 86+✓ Full (measured)
Without :focus-visible (before 2021), keyboard focus does not trigger the animation. The element remains usable via keyboard, without the animated visual feedback.
The code
Copy the two blocks (HTML and CSS) into your page. No JavaScript, no dependencies.
HTML
<div class="fx-0344-root">
<button class="hover-box hover-bg-slide" type="button">
<span>BG Slide</span>
</button>
</div>
CSS
.fx-0344-root,
.fx-0344-root *,
.fx-0344-root *::before,
.fx-0344-root *::after {
box-sizing: border-box
}
.fx-0344-root {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Site design system variables this code depends on (values from css/style.css — adapt freely). */
.fx-0344-root {
--bg-card: #12121a;
--border: rgba(255, 255, 255, 0.08);
--radius-xl: 1rem;
}
.fx-0344-root .hover-box {
width: 200px;
height: 200px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
font: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
.fx-0344-root .hover-bg-slide {
background: linear-gradient(90deg, var(--bg-card) 50%, #6366f1 50%);
background-size: 200% 100%;
background-position: left;
transition: all 0.5s ease;
}
.fx-0344-root .hover-bg-slide:hover {
background-position: right;
color: white;
}
.fx-0344-root .hover-bg-slide:focus-visible {
background-position: right;
color: white;
outline: 2px solid #6366f1;
outline-offset: 3px;
}
.fx-0344-root .hover-box span {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.fx-0344-root * {
transition: none !important;
animation-play-state: paused !important;
}
}
JavaScript
Pure CSS — no JavaScript needed.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Hover colour (CSS — #6366f1) |
indigo | Replace with your brand's primary colour. For a gradient on the indigo half, replace #6366f1 with linear-gradient(90deg, #6366f1, #d946ef) in the background definition. |
Direction (CSS — gradient(90deg, …)) |
left → right | 180deg gives a bottom-to-top fill; 270deg right to left. |
Duration (CSS — 0.5s ease) |
0.5 s | 0.25 s is snappier; 0.8 s is slower. ease-in-out softens the animation at both ends. |
Colour split (CSS — 50%) |
50/50 | Using 60% reduces the indigo area, keeping more of the resting colour in the gradient. |
Text colour on hover (CSS — color: white) |
white | Adjust to maintain WCAG contrast (≥ 4.5:1) for the chosen end colour. |
FAQ
How do I make the background slide from right to left?
Swap the two colours in the gradient and set background-position: right at rest and left on hover.
Can I use a three-colour gradient?
Yes. Define e.g. linear-gradient(90deg, #12121a 0%, #6366f1 50%, #d946ef 100%) at 300% width, animating background-position from 0% 0% to 100% 0%. Adjust stop positions for the desired effect.
The background flickers briefly on tap on iOS. How do I prevent it?
Add -webkit-tap-highlight-color: transparent to the element. This removes WebKit's tap highlight without disabling other state feedback.
