Button Snippets — Free HTML CSS JS Copy-Paste Buttons

Buttons are the most-clicked element in any web interface. Whether you need a basic four-variant CTA group for a form footer, a loading state for an async submission, or dramatic micro-interactions like magnetic cursor attraction and physics-based confetti, this collection covers every button pattern used in production web products.

Every snippet is plain HTML, CSS, and vanilla JavaScript. No React, no npm install, no build step. Copy the code and drop it into any project immediately.

Button Group provides four semantic variants — primary (filled accent), secondary (muted fill), ghost (transparent with border), and danger (red) — all sharing a base .btn class that controls padding, border-radius, font weight, and transition. Each variant overrides only colour. This is the starting point for any form footer, modal action row, or inline action group.

Loading Button implements a three-state machine: idle → loading → success. On click, a CSS spinner appears and the label changes to "Saving…". When the async operation resolves, the button transitions to a green success state with a tick, then resets after 2 seconds. The state is managed purely by adding and removing CSS classes — no inline style changes.

Ripple Button creates a Material Design-style click ripple from the exact position of the mouse click. getBoundingClientRect() gives the button's position on screen. The click coordinates minus the button's top-left give the ripple origin as a percentage. A CSS keyframe scales the ripple from 0 to 4× size and fades it out. The element is created and removed on each click — no accumulated DOM nodes.

Magnetic Button uses vector math to attract the button toward the cursor when the mouse is within a configurable radius. requestAnimationFrame runs a lerp (linear interpolation) loop: the button's transform eases toward the target position at 12% per frame. When the cursor leaves the magnetic zone, the button eases back to its origin. This effect appears on premium agency sites and creative portfolios.

Neon Glow Buttons achieve the cyberpunk glow effect with layered box-shadow: an inner white shadow for the bright core, a mid-range shadow for the mid-glow, and an outer shadow for the ambient spread — all in the same hue. The effect uses zero images or SVGs.

Confetti Button fires 80 physics particles on click. Each particle has a random angle (polar coordinates), random speed, and a CSS custom property for its trajectory. gravity reduces the y velocity each frame. Particles fade out as they reach 100% opacity decay. The confetti runs entirely in JavaScript with DOM elements — no Canvas.

Copy to Clipboard uses the Clipboard API with async/await. Success: button label changes to "Copied!" and reverts after 1.5 seconds. Fallback for older browsers uses document.execCommand.

Social Login Buttons provide Google, GitHub, and X (Twitter) OAuth-style buttons with brand icons, an "OR" divider, and an email/password fallback. Each button has brand-correct colours and hover states.

Badge Chips covers both semantic status badges (Active, Pending, Error in green/yellow/red) and removable filter chips for tag management and search filter UIs.