Color Shift
Background shifts from indigo to violet and the element lifts slightly (translateY -5 px) on hover in 0.5s — color + transform transition, pure CSS.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0349-root wrapper centres a 200 px button. At rest, the background is indigo (#6366f1). On hover, background: #d946ef (violet-pink) and transform: translateY(-5px) apply simultaneously over 0.5 s. The transition covers background-color, color and transform. The colour change (indigo → violet) is the main effect; the slight upward shift reinforces the hover impression without strongly displacing the element in the layout.
No pseudo-element, no gradient on the animation — background-color itself transitions from one colour to the other. :focus-visible triggers the same state. Under reduced motion, the transition is removed (instant change) and translateY is suppressed, leaving only the colour change visible.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, all transitions are disabled and thetransformis suppressed on hover. The colour change (indigo → violet) remains active instantly — state feedback guaranteed. - Keyboard: the element is a natively focusable
<button>.:focus-visibletriggers the colour change and lift, with a 2 px white outline for keyboard focus. - Contrast: violet-pink (
#d946ef) on a white background may be insufficient (ratio < 3:1). Check with a WCAG contrast tool if your brand changes the colours. - Touch: a tap activates the CSS hover state on most mobile browsers. The effect clears on the next focus change.
Browser compatibility
Pure CSS. Properties: background-color, color, transform: translateY, transition, :focus-visible. Verified in Chromium and Firefox: colour change and lift visible, two independent copies, 0 errors.
Without :focus-visible (before 2021), keyboard focus does not trigger the colour change.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0349-root">
<button class="csh-box csh-shift" type="button">
<span>Your text</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Resting colour (CSS — background: #6366f1) |
indigo | Replace with your brand's primary colour. Ensure white text is readable (WCAG ratio ≥ 4.5:1). |
Hover colour (CSS — background: #d946ef) |
violet-pink | Choose a colour that contrasts with the hover text. For a subtler effect, use a slightly darker shade of the resting colour. |
Vertical lift (CSS — translateY(-5px)) |
-5 px | 0 removes the lift, leaving only the colour change. -10 px is more pronounced but may visually misalign in a tight grid. |
Duration (CSS — 0.5s) |
0.5 s | 0.2 s is more responsive; 0.8 s gives a smoother transition. |
Targeted transition (CSS — background-color 0.5s, color 0.5s, transform 0.5s) |
3 properties | Remove transform 0.5s to disable the lift while keeping the colour animation. |
FAQ
transform: translateY(-5px) from the :hover/:focus-visible rule and remove transform 0.5s from the transition. Keep only background-color 0.5s, color 0.5s.background-image (gradient) directly. Two approaches: a ::before pseudo-element with the gradient at opacity: 0 transitioned to 1 on hover; or background-size: 200% with position animation (see fx-0344).translateY does not affect document flow — the reserved space stays the same. If the element visually overlaps a neighbour, add z-index: 1 to the :hover/:focus-visible state and isolation: isolate on the parent.
