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 8 of 9

Live preview Buttons

Press Depth Button

Layered 3D button with deep shadow stack that compresses on press.

#hover #shadow #border

Live preview Buttons

Prism Edges

Clear button with rainbow refracting edges.

#hover #gradient #transform

Live preview Buttons

Pry Bar

Pry-bar button with a flat steel-crowbar accent.

#hover #gradient #shadow

Live preview Buttons

Pulsar

Pulsar button with a rhythmic energy pulse.

#hover #animation #gradient

Live preview Buttons

Pumpkin Patch

Pumpkin orange with vertical ridge lines.

#hover #gradient #transform

Live preview Buttons

Punched Metal

Industrial punched-metal button with dotted holes.

#hover #gradient #shadow

Live preview Buttons

Pylon

Steel-pylon button with tall lattice framework.

#hover #gradient #shadow

Live preview Buttons

Quahog

Quahog-clam button with a ridged shell edge.

#hover #gradient #shadow

Live preview Buttons

Quantum Field

Tech-blue button with vibrating quantum field.

#animation #gradient #transform

Live preview Buttons

Rose Quartz

Pink crystal quartz with inner facets.

#hover #gradient #transform

Live preview Buttons

Quasar Burst

Cosmic quasar with radial energy burst.

#animation #gradient #shadow

Live preview Buttons

Quasar Burst

Quasar-button with a radiant energy burst.

#hover #gradient #transform

Live preview Buttons

Quasar Light

Quasar-light button with a luminous yellow core.

#hover #gradient #transform

Live preview Buttons

Quayside

Quayside button with stone-waterline tones.

#hover #gradient #transform

Live preview Buttons

Quench Tank

Quench-tank button with a dark oil-coolant sheen.

#hover #gradient #shadow

Live preview Buttons

Quill

Feather-quill button with a sharp pointed edge.

#hover #gradient #shadow

Live preview Buttons

Quince

Quince-yellow button with a fuzzy matte skin.

#hover #gradient #transform

Live preview Buttons

Radar Sweep

Dark scope button with a rotating radar sweep.

#animation #gradient #transform

Live preview Buttons

Radioactive Glow

Toxic green button with pulsing hazard glow.

#animation #gradient #shadow

Live preview Buttons

Rainbow Hover Button

Plain button whose background cycles through the rainbow on hover.

#animation #hover #border

Live preview Buttons

Rainforest Canopy

Lush layered rainforest greens.

#hover #gradient #shadow

Live preview Buttons

Rampart

Fortress rampart button with crenellated edges.

#hover #gradient #shadow

Live preview Buttons

Rapids

River-rapids button with frothy white-blue caps.

#hover #gradient #transform

Live preview Buttons

Ratchet

Ratchet-button with a clicking toothed wheel.

#hover #gradient #shadow

Live preview Buttons

Ravens Wing

Black-blue iridescent raven feather sheen.

#hover #gradient #transform

Live preview Buttons

Reamer

Reamer-button with spiral-fluted grooves.

#hover #gradient #shadow

Live preview Buttons

Redshift

Redshift button shifting from blue to red on hover.

#hover #gradient #transform

Live preview Buttons

Redwood Bark

Tall redwood bark with deep vertical grooves.

#hover #gradient #shadow

Live preview Buttons

Reed

Marsh-reed button with vertical golden striations.

#hover #gradient #shadow

Live preview Buttons

Coral Reef

Vibrant reef teal with coral speckles.

#hover #gradient #shadow

Live preview Buttons

Reef Slope

Reef-slope button with a descending coral pattern.

#hover #gradient #transform

Live preview Buttons

Regal Crown

Royal purple button with golden crown glow.

#hover #gradient #transform

Live preview Buttons

Ancient Relic

Tarnished bronze relic with cracked edges.

#hover #gradient #shadow

Live preview Buttons

Retro Wave Sun

80s synthwave grid with magenta sun.

#gradient #transform #shadow

Live preview Buttons

Ripple Ring Button

Concentric rings pulse outward from the button edge while the pointer rests on it.

#hover #animation #transform

Live preview Buttons

Ripple Shine Sweep

A diagonal light sweep animates across the button on hover.

#gradient #hover #shadow

Live preview Buttons

Riverbed Stone

Wet riverbed stones in blue-gray tones.

#hover #gradient #shadow

Live preview Buttons

Rivet

Rivet-button with metallic rounded rivet heads.

#hover #gradient #shadow

Live preview Buttons

Roadtrip Diner

Retro neon-diner sign with red-yellow.

#hover #gradient #shadow

Live preview Buttons

Robin Egg

Soft speckled robin-egg blue.

#hover #gradient #transform

Live preview Buttons

Rose Hip

Rose-hip button with a bright red berry accent.

#hover #gradient #shadow

Live preview Buttons

Rose Quartz Heart

Pink rose-quartz heart-stone button.

#hover #gradient #transform

Live preview Buttons

Rosewood Carve

Dark rosewood with carved pattern.

#hover #gradient #shadow

Live preview Buttons

Rosewood Stain

Dark rosewood button with a wood-grain stain sheen.

#hover #gradient #shadow

Live preview Buttons

Rouge Blush

Soft powder rouge blush with shimmer.

#hover #gradient #transform

Live preview Buttons

Rubber Band Button

Teal button that wobbles elastically like a rubber band on hover.

#animation #hover #shadow

Live preview Buttons

Ruby Spark

Deep red ruby with a single white spark.

#hover #gradient #transform

Live preview Buttons

Russet Leaf

Autumn russet button with a leaf-vein sheen.

#hover #gradient #shadow

Live preview Buttons

Rust Iron

Rusted iron button with oxidation patches.

#hover #gradient #shadow

Live preview Buttons

Safflower

Safflower-red button with a petal-glow finish.

#hover #gradient #transform

Live preview Buttons

Saffron Spice

Deep saffron-orange with thread texture.

#hover #gradient #shadow

Live preview Buttons

Sage Mist

Sage-green button with a misty matte finish.

#hover #gradient #transform

Live preview Buttons

Sagebrush

Sagebrush button with dusty desert tones.

#hover #gradient #shadow

Live preview Buttons

Sail Keel

Sail-keel button with a triangular sail accent.

#hover #gradient #shadow

Live preview Buttons

Sailor Knot

Navy sailor button with rope-knot border.

#hover #gradient #shadow

Live preview Buttons

Salamander

Fire-salamander button with ember stripes.

#hover #gradient #shadow

Live preview Buttons

Salmon Run

Upstream salmon-pink button with motion lines.

#animation #gradient #transform

Live preview Buttons

Sandblast

Sandblast-button with a frosted gritty surface.

#hover #gradient #shadow

Live preview Buttons

Sandbox

Sand-tan button with grainy texture.

#hover #gradient #shadow

Live preview Buttons

Sapphire Gem

Royal blue sapphire with faceted sheen.

#hover #gradient #transform

Live preview Buttons

Satin Sheen

Smooth satin-finish button with diagonal sheen.

#hover #gradient #transform

Live preview Buttons

Saturn Ring

Saturn-amber button with a tilted gold ring.

#hover #gradient #transform

Live preview Buttons

Savanna Sun

Golden savanna grass under wide sun.

#hover #gradient #shadow

Live preview Buttons

Scanner Line

Black-green button with scanning beam line.

#animation #shadow #border

Live preview Buttons

Scarlet Letter

Bold scarlet-red with serif accent.

#hover #gradient #transform

Live preview Buttons

Scuba Dive

Deep dive blue with rising bubble particles.

#animation #gradient #transform

Live preview Buttons

Seafoam Wash

Light seafoam-green with frothy white edge.

#hover #gradient #transform

Live preview Buttons

Shadow Cast

Dark button that lifts its shadow on hover.

#hover #gradient #transform

Live preview Buttons

Shake Button

Red alert button that shakes rapidly while hovered, then inverts on click.

#animation #hover #border

Live preview Buttons

Sharkskin Suit

Smooth gray sharkskin weave pattern.

#hover #gradient #shadow

Live preview Buttons

Silk Sheen

Soft silk button with diagonal moving sheen.

#animation #gradient #transform

Live preview Buttons

Sherbet Swirl

Creamy orange-raspberry sherbet swirl.

#animation #gradient #transform

Live preview Buttons

Soft Shimmer

Pastel button with a soft shimmer overlay.

#animation #gradient #transform

Live preview Buttons

Shoal

Shoal-button with a school of fish specks.

#hover #gradient #transform

Live preview Buttons

Silver Leaf

Hand-applied silver leaf with crackled edges.

#hover #gradient #transform

Live preview Buttons

Slate Edge

Cool slate gray with chiseled edge.

#hover #gradient #transform

Live preview Buttons

Snake Border Button

A single bright emerald arc travels continuously around the perimeter.

#gradient #animation #hover

Live preview Buttons

Snowfall Drift

Frosted button with snowflakes drifting down.

#animation #gradient #shadow

Live preview Buttons

Soft Bloom

Soft pink bloom that expands on hover.

#hover #gradient #transform

Live preview Buttons

Sonar Ping

Sonar pings radiating outward in teal.

#animation #shadow #border

Live preview Buttons

Sorrel

Sorrel-leaf button with a reddish-veined tint.

#hover #gradient #shadow

Live preview Buttons

Spider Web

Black button with white web overlay.

#gradient #shadow #border

Live preview Buttons

Spike Stud

Punk rock button with spiked border.

#hover #gradient #transform

Live preview Buttons

Spinel Cut

Octahedral spinel gem with crisp facets.

#hover #gradient #transform

Live preview Buttons

Spiral Burst

Conic spiral that rotates on hover.

#hover #gradient #transform

Live preview Buttons

Spire

Tall spire button with a pointed apex.

#hover #gradient #shadow

Live preview Buttons

Split Text Button

The label slides up out of view while a second message rises to replace it.

#hover #transform

Live preview Buttons

Spring Bloom

Fresh spring greens with blossom dots.

#hover #gradient #transform

Live preview Buttons

Spring Up Button

Orange button that springs up with overshoot easing on hover.

#animation #hover #shadow

Live preview Buttons

Sprocket

Sprocket-button with a toothed ring pattern.

#hover #gradient #shadow

Live preview Buttons

Stanchion

Stanchion-button with vertical support posts.

#hover #gradient #shadow

Live preview Buttons

Stardust Trail

Cosmic button with scattered stardust.

#gradient #shadow #border

Live preview Buttons

Stardust Trail

Stardust button with a sparkly particle trail.

#hover #gradient #transform

Live preview Buttons

Static Noise

Old TV static noise on a black button.

#animation #gradient #transform

Live preview Buttons

Steampunk Brass

Aged brass button with rivets and gear feel.

#hover #gradient #shadow

Live preview Buttons

Stitched Outline Button

A dashed stitch line sits inside the button and creeps around it on hover.

#hover #animation #border