Buttons — 860 CSS effects

Interactive buttons, calls to action, and polished press states.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 1 of 9

Live preview Buttons

Abalone Shell

Iridescent abalone shell with shifting hues.

#animation #gradient #transform

Live preview Buttons

Alpine Peak

Snow-capped alpine mountain button.

#hover #gradient #shadow

Live preview Buttons

Birch Trunk

White birch trunk with peeling bark.

#hover #gradient #shadow

Live preview Buttons

3D Push Button

Skeuomorphic 3D button that physically depresses on click.

#hover #3d #shadow

Live preview Buttons

Aurora Borealis

Northern-lights button with shifting aurora hues.

#hover #animation #gradient

Live preview Buttons

Blade Slash Button

Sleek button with a diagonal blade slash on hover.

#hover #gradient #transform

Live preview Buttons

Antique Brass

Tarnished antique brass with verdigris spots.

#hover #gradient #shadow

Live preview Buttons

Barn Owl

Soft tawny owl-feather pattern.

#hover #gradient #shadow

Live preview Buttons

Emery

Emery-abrasive button with a rough gritty texture.

#hover #gradient #shadow

Live preview Buttons

Retro Terminal Button

Monospace terminal-style button with blinking cursor block.

#animation #hover #shadow

Live preview Buttons

Spotlight Sweep Button

A warm yellow spotlight glow follows the cursor across the surface.

#gradient #hover #border

Live preview Buttons

Amber Glow Button

Warm amber button with a soft pulsing radial glow.

#hover #animation #gradient

Live preview Buttons

Apricot Glow

Soft apricot orange with gentle glow.

#hover #gradient #transform

Live preview Buttons

Binary Stream Button

Matrix-style button with falling binary digits in the background.

#hover #animation #transform

Live preview Buttons

Bonsai Tree

Tiny bonsai with green crown on brown pot.

#hover #gradient #shadow

Live preview Buttons

Bracket Wrap Button

Code-style button wrapped by animated square brackets.

#hover #transform #shadow

Live preview Buttons

Brass Buckle

Polished brass belt buckle shape.

#hover #gradient #shadow

Live preview Buttons

Ceramic Glaze

Glossy ceramic with speckled glaze.

#hover #gradient #transform

Live preview Buttons

Frosted Ice Button

Translucent frosted ice button with a sweeping crystalline shine.

#gradient #hover #glass

Live preview Buttons

Nebula Cloud

Cosmic purple-pink nebula swirl.

#hover #gradient #transform

Live preview Buttons

Ocean Tide

Waves rolling across a blue button face.

#animation #gradient #transform

Live preview Buttons

Pelagic

Open-ocean pelagic button with deep blue vastness.

#hover #gradient #transform

Live preview Buttons

Rafter

Rafter-button with diagonal roof beams.

#hover #gradient #shadow

Live preview Buttons

Smoke Drift

Translucent gray smoke drifting upward.

#animation #gradient #transform

Live preview Buttons

Tundra Frost

Icy tundra grays with frost crystals.

#hover #gradient #shadow

Live preview Buttons

Vanilla Bean

Creamy vanilla with dark bean specks.

#hover #gradient #transform

Live preview Buttons

Violet Storm

Deep violet button with lightning flicker.

#animation #gradient #shadow

Live preview Buttons

Void Black

Pure void-black button with a subtle violet rim.

#hover #shadow #border

Live preview Buttons

Wave Crest

Wave-crest button with a curling white foam top.

#hover #gradient #transform

Live preview Buttons

Whetstone

Whetstone-button with a smooth sharpening surface.

#hover #gradient #shadow

Live preview Buttons

Yarrow

Pale yarrow-cluster button with tiny white dots.

#hover #gradient #shadow

Live preview Buttons

Abyss Depth

Bottomless abyss with descending blue gradient.

#hover #gradient #shadow

Live preview Buttons

Acorn Cap

Brown acorn with cap-textured top.

#hover #gradient #shadow

Live preview Buttons

Acorn Shell

Acorn-brown button with a glossy cap shell.

#hover #gradient #shadow

Live preview Buttons

Aerospace Panel

Industrial aerospace metal panel with rivets.

#hover #gradient #transform

Live preview Buttons

Almond Cream

Soft almond-cream with brown speckle.

#hover #gradient #transform

Live preview Buttons

Amber Haze

Golden amber button with a hazy outer glow.

#hover #gradient #transform

Live preview Buttons

Andromeda

Andromeda-galaxy button with spiral star arms.

#hover #gradient #transform

Live preview Buttons

Animated Stripe Button

Diagonal candy stripes that scroll continuously across the button.

#gradient #animation #hover

Live preview Buttons

Anodized Aluminum

Colorful anodized aluminum with smooth surface.

#hover #gradient #shadow

Live preview Buttons

Aquamarine Sea

Pale aquamarine sea-gem with clear facets.

#hover #gradient #transform

Live preview Buttons

Arc Welder Button

Industrial button with an electric arc tracing its top edge.

#hover #animation #transform

Live preview Buttons

Arena Sand

Gladiator-style button with sandy texture.

#hover #gradient #transform

Live preview Buttons

Asteroid Belt

Asteroid-belt button with floating rock specks.

#hover #gradient #transform

Live preview Buttons

Auger

Auger-button with a helical screw spiral.

#hover #gradient #shadow

Live preview Buttons

Avocado Pit

Green avocado with brown pit center.

#hover #gradient #transform

Live preview Buttons

Axletree

Axletree-button with a heavy central iron shaft.

#hover #gradient #shadow

Live preview Buttons

Banana Peel

Yellow banana peel with subtle curve.

#hover #gradient #transform

Live preview Buttons

Bark Strip

Tree-bark button with vertical striping.

#hover #gradient #shadow

Live preview Buttons

Beetle Shell

Iridescent beetle shell in green-purple.

#animation #gradient #shadow

Live preview Buttons

Bessemer Steel

Molten bessemer steel with hot edge.

#hover #gradient #shadow

Live preview Buttons

Black Hole

Black-hole button with an accretion disk rim.

#hover #gradient #transform

Live preview Buttons

Ink Blot Button

Button whose background blooms like an ink blot on hover.

#hover #transform #border

Live preview Buttons

3D Bounce Button

Candy button that bounces with a 3D spring on hover.

#hover #animation #transform

Live preview Buttons

Brickwork

Brickwork button with running-bond pattern.

#hover #gradient #shadow

Live preview Buttons

Cantaloupe Mesh

Orange cantaloupe with mesh-net pattern.

#hover #gradient #transform

Live preview Buttons

Canvas Paint Button

Button that looks like a painted canvas brush stroke.

#hover #transform #shadow

Live preview Buttons

Champagne Bubbles

Pale champagne with rising bubble streams.

#animation #gradient #shadow

Live preview Buttons

Chesapeake Bay

Brackish bay water teal-brown gradient.

#hover #gradient #shadow

Live preview Buttons

Citrus Squeeze

Bright citrus orange-lemon-lime gradient.

#hover #gradient #shadow

Live preview Buttons

Clock Spin Button

Circular button with a clock-hand spinner on hover.

#hover #animation #transform

Live preview Buttons

Column Fluted

Fluted column button with vertical grooves.

#hover #gradient #shadow

Live preview Buttons

Copper Wash

Copper button with a brushed wash finish.

#hover #gradient #shadow

Live preview Buttons

Dahlia Bloom

Layered dahlia petals in deep magenta.

#hover #gradient #transform

Live preview Buttons

Equinox

Equinox button with a balanced day-night split.

#hover #gradient #transform

Live preview Buttons

Flute Pillar Button

Tall slender button with vertical flute grooves.

#hover #gradient #transform

Live preview Buttons

Focus Ring Button

Minimal button that gains an accessibility-style focus ring on hover.

#hover #border

Live preview Buttons

Forge Hammer Button

Slate button that looks hammered into shape on hover.

#hover #transform #shadow

Live preview Buttons

Frame Border Button

Photo-frame button with a double-line inset border on hover.

#hover #shadow #border

Live preview Buttons

Fuchsia Pop

Vivid fuchsia pink with bounce animation.

#hover #gradient #transform

Live preview Buttons

Gate Valve Button

Industrial gate valve button with horizontal slide reveal.

#hover #transform #border

Live preview Buttons

Gibbous

Gibbous-moon button with a partial curved shadow.

#hover #gradient #transform

Live preview Buttons

Glacier Ice

Cracked glacier ice with blue depths.

#hover #gradient #transform

Live preview Buttons

Graphite Pencil

Dark graphite pencil-tip sheen.

#hover #gradient #shadow

Live preview Buttons

Grass Blade Button

Green button with grass blades growing on top.

#hover #gradient #border

Live preview Buttons

Gulf Stream

Gulf-stream button with a flowing blue current.

#hover #gradient #transform

Live preview Buttons

Honeydew Fresh

Pale honeydew melon green button.

#hover #gradient #transform

Live preview Buttons

Ship Hull Button

Navy button with riveted hull plates.

#hover #gradient #transform

Live preview Buttons

Jelly Wobble Button

Translucent jelly button that wobbles like gelatin on hover.

#hover #animation #transform

Live preview Buttons

Jetty

Jetty-button with stone breakwater pattern.

#hover #gradient #shadow

Live preview Buttons

Lilac Bloom

Soft lilac button blooming on hover.

#hover #gradient #transform

Live preview Buttons

Lintel

Stone-lintel button with a heavy horizontal beam.

#hover #gradient #shadow

Live preview Buttons

Magenta Hot Pulse

Vivid magenta button with a throbbing pulse.

#hover #animation #transform

Live preview Buttons

Moonlight Glow

Pale blue moon-kissed button with halo.

#hover #gradient #shadow

Live preview Buttons

Mortar

Mortar-joint button with thick gray seams.

#hover #gradient #shadow

Live preview Buttons

Obelisk

Tall obelisk button with a tapered pyramid top.

#hover #gradient #shadow

Live preview Buttons

Orchid Bloom

Orchid-purple button with a soft bloom glow.

#hover #gradient #transform

Live preview Buttons

Platinum Edge

Polished platinum button with sharp edge.

#hover #gradient #transform

Live preview Buttons

Quartz Spark

Crystalline quartz button that catches light.

#hover #gradient #shadow

Live preview Buttons

Shingle

Shingle-roof button with overlapping wood tiles.

#hover #gradient #shadow

Live preview Buttons

Spectral Veil

Ghostly translucent button with rainbow edge.

#animation #gradient #transform

Live preview Buttons

Sugar Crust

Pastel button with sparkly sugar crust.

#hover #gradient #transform

Live preview Buttons

Tiger Eye

Golden-brown tiger eye gem with chatoyant band.

#hover #gradient #shadow

Live preview Buttons

Trailblazer

Bright orange trailblaze with motion lines.

#animation #gradient #transform

Live preview Buttons

Tree Bark

Rough tree bark with vertical striations.

#hover #gradient #shadow

Live preview Buttons

Trefoil Knot

Three-leaf trefoil with rotating border.

#animation #gradient #transform