Buttons

On hover, dynamically calculates a proportional stretch deformation from the element's font-size and plays a GSAP elastic animation. Touch devices are skipped automatically, and a 500ms hover lock prevents spam triggering.

A CSS-only button hover effect where a slanted background sweeps in from below and duplicate label text slides in on a diagonal path using CSS custom properties for rotation and movement. Supports both hover and focus-visible states.

A CSS-only hover effect where the button scales down and tilts, the text wrapper counter-rotates to stay level, and the text slides up to reveal a text-shadow duplicate beneath it. Uses a custom CSS linear() easing curve to produce an elastic bounce without any JavaScript.

On hover, injects a randomly selected SVG underline path into the box element and draws it in with GSAP DrawSVGPlugin. On mouse leave the path draws out, and the SVG is removed from the DOM. Each hover cycles to the next variant in sequence.

A button that copies an email address to the clipboard using the Clipboard API. Three stacked text spans slide up through an overflow-hidden container to show idle, hover, and copied states. Supports click, keyboard (Enter/Space), focus, and mouseleave interactions with full aria-label updates.

A CSS-only button where hover rotates the icon background 90°, slides a list of three arrow SVGs to reveal a fresh arrow, lifts the text via text-shadow, and sweeps a background panel up from below. All animated targets share a single transition rule via a data attribute selector.

A CSS-only button that uses the steps() timing function to animate a horizontal SVG sprite sheet, creating a stop-motion flickering effect on the icon and background. A separate wiggle keyframe toggles the label text between two rotation states for a jittery feel.

JavaScript splits the button label into individual character spans with incrementing transition-delay values. On hover each character slides up via translateY, revealing a text-shadow duplicate below it. The background panel simultaneously shrinks its inset.

A fully CSS toggle built on a visually hidden checkbox and the :has() selector. Checking the box shifts the dot with a bouncy transition, changes the label color, and changes the section background — all without JavaScript.

A GSAP-animated burger-to-close button. The three lines animate in a multi-step sequence: the middle line shrinks, the outer lines exit, instantly reposition at crossed angles, then animate into an X. Closing reverses all lines back to their original state in one smooth tween.

On mousemove, calculates the cursor offset from the element's center and applies a proportional GSAP x/y translation to both the outer element and an optional inner target at independent strengths. On mouseleave both elements spring back with an elastic ease. Disabled below 992px.

On each click, GSAP MorphSVGPlugin morphs a single SVG path between a play triangle and a pause shape using rotational type and complexity mapping. A boolean tracks the current state to choose the correct target path on each toggle.

On mouseenter and mouseleave, calculates the cursor position relative to the button and positions a circular fill element at exactly that point before scaling it to cover the button. The circle's width grows based on horizontal distance from center, making the fill wider when entering from the edges.

A CSS-only button where hover slides the content pill in from behind a circular arrow bubble, scales in the orange arrow from the left, scales out a duplicate resting arrow from the right, and rotates the arrow SVG 45°. Removing the content element leaves a standalone animated arrow bubble.

Two CSS-only underline link variants built on pseudo-elements. The default version draws a line from left to right on hover. The alt version uses two pseudo-elements with staggered transition-delay to erase the existing underline from right to left then draw a new one from left to right.