CSS button examples you can copy

A gradient is the fastest way to make a call to action stand out. Every button here uses a pure CSS linear-gradient() or radial-gradient() background, so it stays sharp at any size and weighs a few hundred bytes.

See all 14 gradient CSS buttons →

Glassmorphism buttons look like frosted glass: a translucent fill, a blur of whatever sits behind them, and a thin bright edge. The effect comes from backdrop-filter: blur(), which every modern browser supports.

See all 10 glassmorphism CSS buttons →

Neon buttons glow by stacking several box-shadow and text-shadow layers in the same bright colour, from a tight inner glow to a wide soft halo. They work best on dark backgrounds.

See all 12 neon & glow CSS buttons →

A 3D button gets its depth from a solid, unblurred shadow directly underneath it. When you click, the button moves down and the shadow shrinks by the same amount, so it feels like a real key being pressed.

See all 11 3D CSS buttons →

Neumorphism, or soft UI, makes a button look extruded from the page using two shadows: a light one up and to the left, a dark one down and to the right. Claymorphism adds colour and inner shadows for a puffy, 3D-clay look.

See all 10 neumorphism & clay CSS buttons →

Neubrutalist buttons are loud on purpose: flat bright colours, a thick black border and a hard offset shadow with zero blur. They are popular with indie products and portfolios that want to look confident and handmade.

See all 10 neubrutalism CSS buttons →

Minimal buttons stay out of the way: outlines, ghost buttons, hairline borders and text links with an arrow. They make good secondary actions next to a bolder primary button.

See all 9 minimal CSS buttons →

These are the everyday buttons a web app needs: primary and secondary actions, success, danger, warning and info states, plus outline and subtle variants. Every one has a visible keyboard focus ring and readable text contrast.

See all 12 primary, secondary & danger CSS buttons →

These buttons move on their own: gradients that flow, rings that pulse, metallic shimmer and light sweeps. Every animation is plain CSS @keyframes, and each one switches off for people who set "reduce motion" in their system settings.

See all 11 animated CSS buttons →

Retro buttons borrow from arcade machines, Windows 95, 80s synthwave and Y2K chrome. Pixel fonts, bevelled borders and hard shadows do most of the work, with no images needed.

See all 11 retro & pixel CSS buttons →

Playful buttons use rounded fonts, pastel or candy colours, glossy highlights and a bit of bounce. They suit kids’ products, games, food brands and anything that should feel friendly.

See all 11 cute & playful CSS buttons →

Luxury buttons pair deep blacks and jewel tones with metallic gradients like gold, rose gold, champagne and platinum, often set in an elegant serif. They suit fashion, hospitality and premium tiers.

See all 10 dark & luxury CSS buttons →

Earthy buttons use muted, natural colours: forest green, terracotta, sand, sage, olive and espresso. They fit wellness, outdoors, food and sustainability brands that want calm rather than flashy.

See all 10 earthy & natural CSS buttons →