Solderstar — Button Lab
Button Animations
Hover each button to preview. Pick the ones you want to keep — we'll delete the rest.
01 — CSS ::after pseudo
Shimmer Sweep
A diagonal highlight sweeps across on hover. Already used site-wide — shown here as the baseline reference.
02 — CSS transform translateY
Liquid Fill
The gradient floods upward from the bottom as if liquid pouring in. Smooth cubic-bezier easing gives it weight.
03 — CSS clip-path animation
Border Draw
A green border draws around the pill perimeter on hover — like an outline being sketched in real time.
04 — CSS box-shadow keyframe
Glow Pulse
A radiating green halo pulses outward continuously on hover. Works especially well on dark backgrounds.
05 — CSS width + opacity
Arrow Slide
An arrow icon slides in from behind the text on hover, nudging the label to make room. Clean and directional.
06 — CSS keyframe particles
Particle Burst
Tiny dot particles scatter outward from the button on hover. Playful and energetic — great for CTAs.
07 — CSS scale + skew + letter-spacing
Invert Flip
The button scales up with a subtle skew and letter-spacing expansion — spring-eased for a satisfying snap.
08 — CSS scale from centre
Outline Fill
Ghost/outline button that fills solid on hover via a spring-scaled background layer. Elegant on light backgrounds.
09 — JS + CSS keyframe
Ripple
Material Design-style radial ripple expands from the click point. Satisfying tactile feedback on any click.
10 — GSAP mousemove
Magnetic
The button physically follows your cursor within its proximity zone. Premium, tactile, and surprisingly delightful.
11 — CSS clip-path steps()
Typewriter Reveal
On hover the label is overwritten character-by-character with an alternate text using CSS steps() timing.
12 — SVG stroke-dashoffset
Stroke Draw
An SVG stroke traces the full pill perimeter from the click point. The background dissolves as the line completes.