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

Live preview Buttons

Cerulean

Sky cerulean-blue button with airy lightness.

#hover #gradient #transform

Live preview Buttons

Chalk Board Button

Chalk-drawn button on a dark slate background.

#hover #transform #shadow

Live preview Buttons

Charge Up Button

Button that charges up with energy before releasing on hover.

#hover #gradient #transform

Live preview Buttons

Chartreuse Pop

Vivid chartreuse yellow-green with glow.

#hover #gradient #shadow

Live preview Buttons

Checkmark Draw Button

Green pill button with an SVG checkmark that strokes itself in on hover.

#hover #border #transform

Live preview Buttons

Chestnut Brown

Glossy chestnut brown with mahogany tint.

#hover #gradient #shadow

Live preview Buttons

Chiffon Soft

Sheer pale-yellow chiffon-like button.

#hover #gradient #transform

Live preview Buttons

Chimera Blend

Multi-color chimera blend of fiery hues.

#hover #gradient #transform

Live preview Buttons

Circuit Chip Button

IC chip button with pin contacts along its edges.

#hover #gradient #shadow

Live preview Buttons

Chrome Shine

Mirror chrome with diagonal shine sweep.

#animation #gradient #shadow

Live preview Buttons

Cinder Block

Dark cinder gray with rough block texture.

#hover #gradient #shadow

Live preview Buttons

Cinnamon Stick

Warm cinnamon brown with bark curl.

#hover #gradient #shadow

Live preview Buttons

Circuit Trace Button

Dark button with a glowing circuit trace path animation.

#hover #gradient #transform

Live preview Buttons

Citrine Shard

Citrine-crystal button with a faceted shard highlight.

#hover #gradient #shadow

Live preview Buttons

Clamp Press Button

Industrial clamp button that presses down hard on click.

#hover #transform #shadow

Live preview Buttons

Clapboard

Clapboard-siding button with overlapping planks.

#hover #gradient #shadow

Live preview Buttons

Clay Mold Button

Soft clay-textured button with a 3D molded look.

#hover #transform #shadow

Live preview Buttons

Cloud Float Button

White cloud button that floats gently up and down.

#hover #animation #transform

Live preview Buttons

Clove Spice

Dark clove-brown with rusty undertone.

#hover #gradient #shadow

Live preview Buttons

Clover

Clover-leaf button with three round leaflets.

#hover #gradient #shadow

Live preview Buttons

Coal Lump

Black coal lump with subtle sheen.

#hover #gradient #shadow

Live preview Buttons

Cobalt Steel Button

Deep cobalt button with a brushed steel gradient.

#hover #gradient #transform

Live preview Buttons

Cobalt Storm

Deep cobalt button with an electric storm shimmer.

#hover #gradient #transform

Live preview Buttons

Cobblestone

Cobblestone button with rounded stone chips.

#hover #gradient #shadow

Live preview Buttons

Cobweb Lace

Pale gray button with cobweb pattern.

#hover #gradient #shadow

Live preview Buttons

Colonnade

Colonnade button with a row of column lines.

#hover #gradient #shadow

Live preview Buttons

Color Splash Button

Circular paint splash expands from the center to fill the button on hover.

#hover #border #transform

Live preview Buttons

Comet Trail Button

Dark button with a comet streaking across on hover.

#hover #gradient #transform

Live preview Buttons

Comet Streak

Dark cosmic button with a streaking comet tail.

#hover #gradient #shadow

Live preview Buttons

Comet Tail

Cosmic comet with trailing light streak.

#animation #gradient #transform

Live preview Buttons

Confetti Burst Button

Two confetti particles burst upward and outward on hover.

#animation #hover #border

Live preview Buttons

Animated Conic Border

Button with a rotating conic-gradient border that spins around the edge.

#gradient #animation #hover

Live preview Buttons

Conic Halo Button

A registered custom property animates the angle of a conic gradient border ring.

#animation #gradient #hover

Live preview Buttons

Constellation

Constellation button with connected star points.

#hover #gradient #transform

Live preview Buttons

Copper Penny

Shiny copper penny with mint sheen.

#hover #gradient #shadow

Live preview Buttons

Coral Reef Button

Warm coral button with a subtle reef texture gradient.

#hover #gradient #transform

Live preview Buttons

Coral Bay

Coral-pink gradient button with a soft bay-water shimmer.

#hover #gradient #transform

Live preview Buttons

Coral Reef

Pink-orange coral with branching pattern.

#hover #gradient #shadow

Live preview Buttons

Coral Spike

Coral-reef button with branching spike accents.

#hover #gradient #transform

Live preview Buttons

Corinthian

Corinthian-capital button with carved leaf accents.

#hover #gradient #shadow

Live preview Buttons

Cornice

Cornice-molding button with a stepped profile.

#hover #gradient #shadow

Live preview Buttons

Cosmic Field Button

Deep-space button with twinkling starfield background.

#hover #animation #gradient

Live preview Buttons

Cosmic Ray

Cosmic-ray button with a vibrant violet streak.

#hover #gradient #shadow

Live preview Buttons

Cotter Pin

Cotter-pin button with a split spring shape.

#hover #gradient #shadow

Live preview Buttons

Cotton Puff

Soft white cotton puff button.

#hover #gradient #transform

Live preview Buttons

Counter Tab Button

Tab button with an animated number counter badge.

#hover #animation #transform

Live preview Buttons

Cove Bay Button

Calm cove-blue button with a wave lapping its bottom edge.

#hover #animation #gradient

Live preview Buttons

Crack Glass Button

Glass button that develops crack lines on hover.

#hover #gradient #shadow

Live preview Buttons

Cradle Hold Button

Button cradled in a soft glowing halo on hover.

#hover #gradient #transform

Live preview Buttons

Cranberry Tart

Tart cranberry-red with berry speckles.

#hover #gradient #shadow

Live preview Buttons

Wooden Crate Button

Rustic wooden crate button with plank seams.

#hover #gradient #transform

Live preview Buttons

Crimson Velvet Button

Deep crimson velvet button with a soft sheen sweep.

#hover #gradient #transform

Live preview Buttons

Crocus Spring

Spring crocus purple with yellow stamen.

#hover #gradient #transform

Live preview Buttons

Crop Frame Button

Button with crop-mark corners that expand on hover.

#hover #transform #border

Live preview Buttons

Crossfade Color Button

Button whose background crossfades between two colors.

#hover #border

Live preview Buttons

Crown Glow Button

Royal gold button with a glowing crown halo.

#hover #gradient #transform

Live preview Buttons

Crucible

Crucible-button with glowing molten interior.

#hover #gradient #transform

Live preview Buttons

Crystal Facet Button

Crystal button with faceted light reflections.

#hover #gradient #transform

Live preview Buttons

Cube Fold Button

Button that folds like an unfolding cube face on hover.

#hover #transform #border

Live preview Buttons

Cubist Geometry

Cubist geometric facets in earth tones.

#hover #gradient #shadow

Live preview Buttons

Cumin Earth

Earthy cumin-brown with spice specks.

#hover #gradient #shadow

Live preview Buttons

Black Currant

Dark purple-black currant with juicy sheen.

#hover #gradient #transform

Live preview Buttons

Current Deep

Deep-current button with flowing directional lines.

#hover #gradient #transform

Live preview Buttons

Curtain Reveal Button

Button whose two-tone curtain slides open on hover.

#hover #gradient #transform

Live preview Buttons

Cyan Pulse Button

Cyan button that pulses outward with a ring wave.

#animation #transform #shadow

Live preview Buttons

Cyberpunk Clip Button

Angular clip-path button with hot pink offset shadow, cyberpunk vibe.

#hover #shadow #border

Live preview Buttons

Cylinder Roll Button

Cylindrical button that rolls horizontally on hover.

#hover #animation #gradient

Live preview Buttons

Daffodil Cup

Bright yellow daffodil with orange trumpet.

#hover #gradient #transform

Live preview Buttons

Damson Plum

Deep damson-purple plum with bloom.

#hover #gradient #shadow

Live preview Buttons

Dance Wiggle Button

Magenta button that wiggles like it is dancing on hover.

#hover #animation #transform

Live preview Buttons

Dandelion Wish

Yellow dandelion that scatters on hover.

#hover #gradient #transform

Live preview Buttons

Dandelion Fluff

Soft dandelion button with a fluffy seed crown.

#hover #gradient #transform

Live preview Buttons

Dark Matter

Dark-matter button with an unseen violet pull.

#hover #gradient #transform

Live preview Buttons

Dart Shoot Button

Slim button that shoots forward like a dart on hover.

#hover #transform #shadow

Live preview Buttons

Dashed Draw Button

A dashed SVG outline traces itself around the button on hover.

#hover #border #transform

Live preview Buttons

Dawn Break

Dawn-breaking button with sun-rise gradient.

#hover #gradient #transform

Live preview Buttons

Dawn Mist

Soft pink-blue dawn mist gradient.

#hover #gradient #shadow

Live preview Buttons

Decay Rust Button

Metallic button that decays into rust on hover.

#hover #gradient #transform

Live preview Buttons

Deep Amber

Deep amber honey with golden sheen.

#hover #gradient #shadow

Live preview Buttons

Deep Sea Button

Abyssal blue button with drifting bubble particles.

#animation #gradient #transform

Live preview Buttons

Deep Swell

Deep-swell button with rising wave bulge.

#hover #gradient #transform

Live preview Buttons

Deer Hide

Tan brown deer hide with subtle texture.

#hover #gradient #shadow

Live preview Buttons

Deflate Balloon Button

Puffy button that deflates on click.

#hover #transform #shadow

Live preview Buttons

Delicate Petal Button

Soft pastel button with a delicate petal outline.

#hover #transform #shadow

Live preview Buttons

Denim Jeans

Blue denim with stitched weave pattern.

#hover #gradient #shadow

Live preview Buttons

Depth Charge Button

Heavy industrial button that sinks with depth shadow on hover.

#hover #transform #shadow

Live preview Buttons

Dewdrop Fresh

Fresh dewdrop on green leaf surface.

#hover #gradient #transform

Live preview Buttons

Diamond Cut Button

Diamond-faceted button that catches light on hover.

#hover #gradient #shadow

Live preview Buttons

Diamond Gem Button

Hexagonal gem-cut button with a top-left sparkle facet.

#gradient #hover #shadow

Live preview Buttons

Dill Weed

Yellow-green dill with feathery leaves.

#hover #gradient #shadow

Live preview Buttons

Dim Glow Button

Dim button that brightens to full glow on hover.

#hover #shadow #border

Live preview Buttons

Disco Floor Button

Button with a flashing disco-tile background.

#hover #animation #gradient

Live preview Buttons

Dissolve Pixel Button

Button whose background dissolves into pixels on hover.

#hover #animation #transform

Live preview Buttons

Distant Echo Button

Button that floats away with a fading echo on hover.

#hover #transform #border

Live preview Buttons

Dittany

Dittany-herb button with a soft pink-bloom tint.

#hover #gradient #shadow

Live preview Buttons

Dive Plunge Button

Button that plunges downward in a dive on hover.

#hover #transform #shadow