43 CSS Button Designs
Advertisement
A CSS button is the primary call-to-action element on any page — the control that gets clicked. These 43 hand-coded designs are ready-to-ship buttons for forms, hero CTAs, toolbars, and inline actions — copy the markup, drop in your label, and ship.
Updated · 12 new designs added
·
01 / 43
Add to Cart
CSS + JS NEW 
A real e-commerce state machine: click fills a green progress bar along the bottom edge, snaps to a success state with a particle burst, then auto-resets after two seconds.
02 / 43
Download Progress
CSS + JS NEW 
The button body itself fills left-to-right like a true progress indicator while the arrow bounces, then morphs into a "Complete" state with a checkmark.
03 / 43
Like Heart
CSS + JS NEW 
A toggle that bursts seven floating heart particles upward on activation; the count ticks up or down with a sliding number animation.
04 / 43
Confirm Delete
CSS + JS NEW 
A two-step destructive pattern: the first click shakes the button and slides up a red confirmation panel; a second click within three seconds wipes it with a sweep into a "Deleted" ghost state.
05 / 43
Play Pause
CSS + JS NEW 
A media control whose icon morphs between a triangle and pause bars; a pulsing halo ring appears while playing and a row of waveform bars dances with staggered timing.
06 / 43
Subscribe Confetti
CSS + JS NEW 
The border fills upward with a purple gradient, the label swaps to a checkmark, then twenty-four confetti pieces in six colors burst outward in a celebratory fan.
07 / 43
Magnetic Mercury
CSS + JS NEW 
A liquid-metal pill with a polished radial sheen. Click anywhere on the surface and a bright ripple expands from the exact point of contact, like mercury catching the light.
08 / 43
Brutalist Glitch
CSS + JS NEW 
A raw outlined button that fills hard on hover. Click triggers a chromatic-aberration glitch — the label tears into red and cyan layers with a violent shake before snapping back.
09 / 43
Neon Noir
CSS + JS NEW 
A cyberpunk terminal button glowing faint cyan. Click detonates a plasma burst — an expanding ring, a radial bloom, and ten sparks flung from the point of contact.
10 / 43
Clay Press
CSS + JS NEW 
A chunky claymorphism button with a thick 3D base shadow. Press it and the whole shape squishes down and stretches wide, with a soft white bloom blossoming from the click point.
11 / 43
Editorial Ink
CSS + JS NEW 
A serif, italic button with a thin frame and a hairline underline that draws in on hover. Press and hold and ink floods the button from your finger; release and it retreats.
12 / 43
Particle Burst
CSS + JS NEW 
A warm, dark editorial button. Click and eighteen triangular shards explode outward in a full circle — each a random size, colour, and spin — like struck flint throwing sparks.
13 / 43
Brushed Brass
Pure CSS 
Letterpress brass plate with engraved label and steel rivets at the corners. Hover deepens the bevel; click presses the plate into the surface.
14 / 43
Paper Crane
Pure CSS 
Washi paper with a hand-stamped red ink seal in the corner. The bottom-right corner is folded like an origami crease; hover lifts the whole card like a postcard.
15 / 43
Frosted Ice
Pure CSS 
Glacier blue with backdrop-filter refraction and noisy frost grain on top. Hover melts the surface to a brighter, glossier ice.
16 / 43
Typewriter Key
Pure CSS 
Concave ivory keycap with black ring and serif letter. Click depresses the key 4px with a soft mechanical thud shadow.
17 / 43
Lacquered Wood
Pure CSS 
Walnut grain block with brass corner brackets and gilt label. Hover deepens the lacquer sheen; the brass catches a tilt of light.
18 / 43
Gel Capsule
Pure CSS 
Pill-shaped pharma capsule split half clinical-blue, half pearl-white, with a chunky black band carrying the dose label. Hover brightens both halves.
19 / 43
Copper Coin
Pure CSS 
Aged copper disc with verdigris patina blooming around the rim. Hover spins the patina conically.
20 / 43
Origami Fortune
Pure CSS 
Triangular fold of cream paper with a single ink-red strip. Hover unfolds slightly to reveal the fortune underneath.
21 / 43
Holographic Foil
Pure CSS 
Iridescent cyan→magenta sheen with a ragged sticker edge. Hover shifts the spectrum across the surface.
22 / 43
Brutalist Slab
Pure CSS 
Rough concrete with a safety-yellow stripe and hard 6px offset. Click slams the slab to flush with the page.
23 / 43
Mercury Bead
Pure CSS 
Quicksilver bead that morphs its border-radius on hover, like surface tension giving way under pressure.
24 / 43
Soft Pill
Pure CSS 
The Linear / Raycast / Vercel button trend of 2026 — soft gradient pill with a crisp inset highlight, ambient glow, and a tiny shortcut chip on the right. Hover brightens the glow without moving the button.
25 / 43
Masking Tape
Pure CSS 
Kraft masking tape with torn perforated edges and a hand-stamped ink label. Hover lifts the corner like a peel.
26 / 43
Glass Shard
Pure CSS 
Obsidian shard with a faceted clip-path; magenta and cyan refract through the cuts on hover.
27 / 43
Velvet Ribbon
Pure CSS 
Wine-velvet pill with gilt edges; the nap shimmers like brushed fabric on hover.
28 / 43
LED Segment
Pure CSS 
Phosphor-green 7-segment-style display on a pure black panel with a faint scanline overlay.
29 / 43
Cassette Label
Pure CSS 
Hot-pink mixtape J-card with electric-teal corner sticker and ruled lines. Hover gives it a 90s cassette tilt.
30 / 43
Chalkboard
Pure CSS 
Slate-green chalkboard with a chalk-drawn label and dusty grain. Hover smudges a faint eraser trail.
31 / 43
Vinyl Sleeve
CSS + JS 
Sleeve-red record cover with concentric grooves; click drops the needle and ripples outward from the click point.
32 / 43
Polaroid Snapshot
Pure CSS 
A genuine Polaroid frame — square sepia photo on top, the iconic chunky white bottom border with a handwritten caption and date stamp. Tilts casually on hover like it was just dropped on a table.
33 / 43
Boarding Pass
Pure CSS 
Airline-navy ticket with three-letter airport codes, a flight-path arrow, magenta tear-line stub, and a real barcode strip along the bottom.
34 / 43
Subway Token
CSS + JS 
Aged brass subway token with a curved arc sweep that traces a clock-like ring around the inscription on click. The arc is an SVG path so the curve stays smooth at every angle.
35 / 43
Rx Label
Pure CSS 
Cream pharmacy label with letterpress serif, dotted underline, and a red Rx badge. Vintage prescription chic.
36 / 43
Radio Dial
CSS + JS 
Bakelite-cream dial with a brass pointer locked to OFF. Click toggles to ON: the pointer swings clockwise to the right tick mark and stays there until the next click.
37 / 43
Postage Stamp
Pure CSS 
Regal blue stamp with scalloped perforated edges and a faded ink date. Pure SVG-mask perforation.
38 / 43
Cigar Band
Pure CSS 
Gold filigree foil seal over a maroon ribbon; ornate Victorian club-lounge energy.
39 / 43
Calculator Key
Pure CSS 
Beige concave keycap with olive-green accent label; click flips the press shadow flush.
40 / 43
Toolbox Latch
CSS + JS 
Enamel teal lever with chrome bolt; the cursor spotlight illuminates the metal as you move across.
41 / 43
Receipt Paper
CSS + JS 
Newsprint-cream receipt with a dashed perforation along the top, a tilted "PAID" rubber stamp watermark in the top-left corner, and a total that counts up on click before resetting.
42 / 43
Punch Card
CSS + JS 
Manila IBM-style punch card with the iconic clipped top-right corner, a stamped FORTRAN-style header at the top, and a real grid of column-and-row holes punched through the body. On hover the whole card follows the cursor magnetically.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
How do I style a button with CSS?
Start from a real button element, then style it: set padding, a background or gradient, border-radius, font-weight, and cursor: pointer. Add a :hover and :active state with a transition so the change is smooth, and a :focus-visible outline so keyboard users can see focus. Every button design in this gallery is built this way — open any demo's code panel to copy the exact CSS.
Should I use a button or an a element for a CSS button?
Use a button element when the control performs an action on the same page (submit, toggle, add to cart, open a dialog). Use an a element when it navigates to another URL. They can look identical with CSS, but the semantics matter for accessibility and SEO: a button is announced as a button and fires on Space, a link is announced as a link and is crawlable. Don't style a div as a button — it loses keyboard and screen-reader support.
Do these CSS buttons need JavaScript?
Most are pure CSS. The visual designs — gradients, materials, and hover and click effects like the magnetic mercury ripple, neon plasma burst, clay press and glitch — are done entirely with CSS transitions, animations and pseudo-elements. A few interactive use-case buttons (Download Progress, Confirm Delete, Subscribe Confetti) include a small self-contained JS snippet in the JS tab for behaviour CSS can't do.
How do I add a ripple or click effect to a button in CSS?
Use a pseudo-element that scales up from the centre. Put position: relative on the button, add an ::after that starts at scale(0) with a radial-gradient or solid circle, and on :active animate it to a larger scale with fading opacity. The Magnetic Mercury and ink-spread demos here show copy-paste ripple effects that need no JavaScript.
Are these CSS buttons accessible and free to use?
Yes to both. Every demo uses a real button element with a visible :focus-visible state, sufficient colour contrast, and aria-label on icon-only buttons; continuous animations honour prefers-reduced-motion. All 43 designs are MIT licensed — free for personal and commercial projects, no attribution required.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive
23 CSS Checkboxes
23
23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.
checkboxes forms animation
Responsive