CSS Hover Effects Generator
Preset hover transitions with live preview and copyable :hover CSS.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css hover effects generator
- Choose a hover effect from the preset list (grow, shrink, lift, sink, rotate, skew, glow, underline slide, color shift, border pulse).
- Pick a duration (e.g. `200ms`) — most UI hovers feel best between 120ms and 250ms.
- Set an easing curve; `cubic-bezier(0.4, 0, 0.2, 1)` is the standard Material easing and a safe default.
- Hover (or focus with Tab) the preview button to see the effect run.
- Press Generate CSS and Copy CSS to grab a `.btn` rule plus its `.btn:hover` companion.
About this css hover effects generator
The hover effects generator emits two CSS rules: a base `.btn` declaration plus a `.btn:hover` declaration that swaps the properties you want to animate. A `transition: all <duration> <easing>` on the base rule does the actual animation. Each of the ten presets is a real CSS recipe you would otherwise have to memorize — `transform: scale(…)` for grow/shrink, `transform: translateY(…)` paired with `box-shadow` for lift, animated `background-size` for the underline slide, color swaps for color shift, and so on. The preview button lives above the form so it paints first and reacts to mouse and keyboard focus.
Worked example: pick `Lift`, duration `200ms`, easing `cubic-bezier(0.4, 0, 0.2, 1)`. The output is: ``` .btn { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.08); } .btn:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.16); } ``` The button physically lifts on hover with a deeper shadow — the standard SaaS card-button pattern. Switch the preset to `Color shift` and the same shape emerges with a background-color swap from indigo to pink.
FAQ
- Why use `transition: all` instead of listing properties?
- For prototype-quality buttons `all` is fine and keeps the CSS short. In production code it is better to list the exact properties (e.g. `transition: transform 200ms ease, box-shadow 200ms ease;`) so unrelated property changes do not animate by accident.
- What duration feels right?
- For hover effects, 120–250ms is the comfortable range. Under 100ms feels instant; over 350ms feels sluggish. Animations applied to layout (height, top/left) generally need slightly longer than transform/opacity tweens.
- Does the effect also trigger on keyboard focus?
- The preview wires up `onFocus`/`onBlur` so Tab triggers the animation too. For your own button, also add `.btn:focus-visible { … }` mirroring the `:hover` rules so keyboard users see the same affordance.
- Can I disable the effect for users who prefer reduced motion?
- Yes — wrap the `:hover` rule in `@media (prefers-reduced-motion: no-preference)` so it only runs for users who have not asked the OS to reduce motion. Best practice for any motion-heavy interaction.
- Will this work on touch devices?
- :hover briefly fires on touch and then stays sticky until another element is tapped — which can look broken. For touch-first UIs, prefer :active or a state class toggled on tap rather than depending on :hover alone.