OneTaskBy Tim King · Updated
CSS Hover Effects Builder
Underlines, Background Sweeps and Shine Passes, Matched on Keyboard Focus for Buttons and Links
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Hover Effect Builder works
CSS hover effects give buttons and links a small animated response when the pointer lands on them. Choose one of six effects, set the text, colour and speed, hover the preview or pin it to its hovered state, and copy the CSS.
A clear hover response tells people an element is clickable before they click it. The best css hover effects are quick and subtle: an underline drawing in, a colour filling the button, or an arrow stepping forward.
How these css hover effects work
Every effect animates only transform, background-size, colour or position of a pseudo-element,
which browsers can animate smoothly. The underline effects draw a line with ::after and scale it
from zero to full width, anchored at the left or the centre. The sweep grows a gradient background
across the button, and the shine slides a pale skewed band from one side to the other.
Keyboard focus
Each hover rule is paired with :focus-visible, so people moving through the page with the
keyboard see the same response as mouse users. Motion is switched off for visitors who ask for
reduced motion, while the colour change still happens.
FAQ
Why does the hover effect not show on phones?
Touch screens have no hover, so the effect only flashes briefly when tapped. That is fine as long as the button looks clickable without it. Never hide essential information behind a hover.
Can I use these effects on a button element instead of a link?
Yes. Change the tag to <button> and keep the class. Add font: inherit and cursor: pointer,
because buttons do not inherit the page font by default.
How fast should a hover effect be?
Between 150 and 300 milliseconds feels responsive. Longer transitions make the interface feel slow, and people often move the pointer away before a long effect finishes.
How do I combine two effects?
Merge the rules for the base class and the hover state, but keep only one ::after effect, since an
element has a single after pseudo-element. Use ::before for the second one if you need both.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Hover Card Builder
Card hover effects with timing controls, previewed live.
Image Hover Zoom
Create a CSS image zoom on hover, including follow-the-pointer product zoom.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.
Fade-In Generator
Generate a CSS fade-in animation with delay, easing and blur.
Staggered Animation Builder
Make list items animate in one after another with CSS.