A call to action that changes its mind. At rest it is an ordinary bordered pill with a small rounded dot parked near its left edge, close enough to read as a bullet rather than as an animation waiting to happen. On hover that dot travels to the top left corner, grows to the full size of the button and overshoots it, so the fill arrives as a bloom from one point instead of as a rectangle fading in; the button clips it, so the overshoot is what removes the last trace of the corner radius mismatch rather than something the eye has to forgive. At the same moment the resting label slides to the right and fades, and a second copy of the label -- already waiting off to the right, in the inverse colour -- rides back in behind it with an arrow beside it. The two labels are never both legible, and they travel the same distance in opposite directions, which is what makes the swap read as one object turning over rather than as two texts crossfading. Everything is a CSS transition on custom properties the editor writes, so there is no runtime, no animation frame loop and nothing to tear down: the export is markup and one stylesheet. The arrow is inline SVG rather than an icon package, so a downloaded file renders on a page that has installed nothing. The hover pose is reachable without a pointer -- keyboard focus drives the same transition, and the editor can pin the state outright -- so the component can be inspected, screenshotted and shown on a catalogue card, none of which involve a mouse sitting on it. Width, height, radius, border, label, size, weight, arrow, all five colours, the transition length, the travel distance, the resting offset and the dot size, position and bloom are editable, and the stage is transparent by default so the button composites onto whatever surface it is dropped on.
In collections: CSS Buttons & Animated Button Effects· CSS Hover Effects & Animations
Guide: Text on Hover: Readable Tooltips and Hover Text Effects
UI/UX · HTML / CSS · All tools