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

Live preview Buttons

Magnolia

Creamy magnolia button with petal softness.

#hover #gradient #transform

Live preview Buttons

Mahogany Wood

Dark polished wood button with grain lines.

#hover #gradient #shadow

Live preview Buttons

Malachite Bands

Deep green gem with concentric band shimmer.

#hover #gradient #transform

Live preview Buttons

Malachite Streak

Banded malachite green with concentric streaks.

#hover #gradient #shadow

Live preview Buttons

Mallet

Wooden-mallet button with a soft удар feel.

#hover #gradient #shadow

Live preview Buttons

Mango Tropical

Ripe mango yellow-orange with red blush.

#hover #gradient #transform

Live preview Buttons

Maple Leaf

Red-orange maple leaf button.

#hover #gradient #shadow

Live preview Buttons

Marble Vein

White marble slab crossed by soft gray veins.

#hover #gradient #transform

Live preview Buttons

Marina

Marina button with calm harbor-blue surface.

#hover #gradient #transform

Live preview Buttons

Masonry

Masonry-button with staggered brick courses.

#hover #gradient #shadow

Live preview Buttons

Mauve Haze

Dusty mauve button with a hazy outline.

#hover #gradient #transform

Live preview Buttons

Meadow Grass

Wild meadow grass with flower dots.

#hover #gradient #shadow

Live preview Buttons

Mercury Bead

Liquid silver mercury button that wobbles on hover.

#hover #gradient #transform

Live preview Buttons

Mesh Gradient Button

Multi-blob radial mesh gradient that drifts underneath the label.

#gradient #animation #hover

Live preview Buttons

Meteor Burn

Meteor-button with a burning atmospheric glow.

#hover #gradient #transform

Live preview Buttons

Milky Way

Milky-way button with a diagonal band of stars.

#hover #gradient #transform

Live preview Buttons

Mineral Vein

Stone button with mineral quartz veins.

#hover #gradient #shadow

Live preview Buttons

Misty Drift

Pale foggy button with drifting cloud layers.

#animation #gradient #transform

Live preview Buttons

Miter Gauge

Miter-gauge button with angled measurement marks.

#hover #gradient #shadow

Live preview Buttons

Mojito Lime

Cool mint-lime button with condensation bubbles.

#hover #gradient #transform

Live preview Buttons

Mosaic Tile

Pixelated mosaic tiles of varied colors.

#hover #gradient #shadow

Live preview Buttons

Mosaic Tile

Mosaic-tile button with multi-colored chips.

#hover #gradient #transform

Live preview Buttons

Mossy Stone

Damp stone button with green moss patches.

#hover #gradient #border

Live preview Buttons

Moss Bed

Moss-bed button with a soft fuzzy texture.

#hover #gradient #shadow

Live preview Buttons

Mulberry Stain

Dark mulberry-purple with stain sheen.

#hover #gradient #shadow

Live preview Buttons

Mustard Zest

Spicy mustard-yellow with a glossy surface.

#gradient #transform #shadow

Live preview Buttons

Narwhal

Narwhal-button with a spiraled ivory tusk accent.

#hover #gradient #transform

Live preview Buttons

Nautical Stripes

Classic navy-white sailor stripes button.

#hover #gradient #transform

Live preview Buttons

Nautical Mile

Nautical-mile button with deep sea-blue depth.

#hover #gradient #transform

Live preview Buttons

Deep Navy Trench

Bottomless navy button with descending gradient.

#hover #gradient #shadow

Live preview Buttons

Nebula Cloud

Nebula-button with drifting cosmic clouds.

#hover #gradient #transform

Live preview Buttons

Neon Glow Pulse

A dark button with a pulsing neon outline glow in cyan.

#animation #glow #hover

Live preview Buttons

Neon Outline Button

A cyan tube-light outline that flickers on and burns brighter on hover.

#hover #animation #shadow

Live preview Buttons

Nettle

Nettle-green button with serrated leaf edges.

#hover #gradient #shadow

Live preview Buttons

Soft Neumorphic Button

Soft UI neumorphic button that pushes in on hover with dual shadows.

#hover #shadow #border

Live preview Buttons

Niche

Wall-niche button with a recessed shadow arch.

#hover #gradient #shadow

Live preview Buttons

Niello

Black niello-inlay button with silver etching.

#hover #gradient #shadow

Live preview Buttons

Nightfall Indigo

Twilight indigo button with star flecks.

#hover #gradient #border

Live preview Buttons

North Star

North-star button with a single bright point.

#hover #gradient #shadow

Live preview Buttons

Nougat Soft

Soft caramel nougat with pillowy surface.

#hover #gradient #transform

Live preview Buttons

Nut Bolt

Nut-and-bolt button with hexagonal bolt head.

#hover #gradient #shadow

Live preview Buttons

Nut Runner

Nut-runner button with a cylindrical socket head.

#hover #gradient #shadow

Live preview Buttons

Nutmeg

Warm nutmeg-brown button with a spice tint.

#hover #gradient #shadow

Live preview Buttons

Oak Barrel

Oak-barrel button with horizontal hoop bands.

#hover #gradient #shadow

Live preview Buttons

Desert Oasis

Sand-to-turquoise gradient like a desert oasis.

#hover #gradient #shadow

Live preview Buttons

Ocean Deep

Deep-ocean button with vast blue depths.

#hover #gradient #transform

Live preview Buttons

Ochre Dust

Yellow ochre button with a dusty grain texture.

#hover #gradient #shadow

Live preview Buttons

Oil Can

Oil-can button with a sleek oiled-metal surface.

#hover #gradient #shadow

Live preview Buttons

OKLCH Pulse Button

Hover and active shades are derived from one base colour with color-mix in OKLAB.

#hover #animation #shadow

Live preview Buttons

Olive Branch

Olive-green button with a leafy branch stroke.

#hover #gradient #shadow

Live preview Buttons

Onyx Gloss

Black onyx stone with mirror sheen.

#hover #gradient #transform

Live preview Buttons

Opal Iridescence

Shifting iridescent opal button.

#animation #gradient #shadow

Live preview Buttons

Orbit Arc

Orbiting planet button with a sweeping arc.

#animation #gradient #transform

Live preview Buttons

Orchid Bloom

Soft orchid-purple button with bloom halo.

#hover #gradient #transform

Live preview Buttons

Origami Fold Button

Paper-textured button whose top-right corner folds open on hover.

#hover #shadow #border

Live preview Buttons

Outer Space

Outer-space button with deep void depth.

#hover #gradient #shadow

Live preview Buttons

Outline Draw Button

Button with an SVG-like outline that draws itself on hover.

#hover #border #transform

Live preview Buttons

Oxblood Velvet

Deep oxblood red velvet button.

#hover #gradient #transform

Live preview Buttons

Oyster Pearl

Soft gray oyster shell with pearlescent hue.

#hover #gradient #transform

Live preview Buttons

Oyster Bed

Oyster-bed button with shimmering pearl interior.

#hover #gradient #transform

Live preview Buttons

Pacific Wave

Calm Pacific blue with a soft ripple.

#hover #gradient #shadow

Live preview Buttons

Paint Stroke

Painterly swipe of color across the button.

#hover #gradient #shadow

Live preview Buttons

Palm Tree Shade

Tropical palm-frond shadow on yellow sand.

#hover #gradient #transform

Live preview Buttons

Pampas

Pampas-grass button with feathery plume accent.

#hover #gradient #shadow

Live preview Buttons

Parapet

Castle-parapet button with crenellated top edge.

#hover #gradient #shadow

Live preview Buttons

Aged Parchment

Yellowed parchment with ink-style border.

#hover #gradient #transform

Live preview Buttons

Parquet

Parquet-floor button with chevron wood pattern.

#hover #gradient #shadow

Live preview Buttons

Pastel Dream

Soft pastel rainbow gradient button.

#hover #gradient #transform

Live preview Buttons

Copper Patina

Aged copper button with green patina patches.

#hover #gradient #border

Live preview Buttons

Pavilion

Pavilion button with a striped tent canopy.

#hover #gradient #transform

Live preview Buttons

Pearl Glow

Pearlescent button with soft inner glow.

#hover #gradient #shadow

Live preview Buttons

Pebble Stone

Smooth river pebble in muted gray.

#hover #gradient #shadow

Live preview Buttons

Hot Pepper

Spicy red pepper button with glossy skin.

#hover #gradient #shadow

Live preview Buttons

Pergola

Pergola button with slatted roof beams.

#hover #gradient #shadow

Live preview Buttons

Periwinkle

Soft periwinkle-blue button with a gentle pulse.

#hover #animation #gradient

Live preview Buttons

Persimmon

Persimmon-orange button with a waxy glow.

#hover #gradient #transform

Live preview Buttons

Pewter

Soft pewter-gray button with brushed metal look.

#hover #gradient #shadow

Live preview Buttons

Phoenix Flame

Rebirth button with rising orange flames.

#animation #gradient #transform

Live preview Buttons

Pier Pile

Pier-pile button with weathered wood grain.

#hover #gradient #shadow

Live preview Buttons

Pillar Stone

Stone-pillar button with vertical striations.

#hover #gradient #shadow

Live preview Buttons

Pine Forest

Deep pine-green button with needle texture.

#hover #gradient #shadow

Live preview Buttons

Pinecone

Pinecone button with overlapping scale pattern.

#hover #gradient #shadow

Live preview Buttons

Pink Lemonade

Refreshing pink and yellow swirl.

#animation #gradient #transform

Live preview Buttons

Pistachio Cream

Light pistachio green with creamy gloss.

#hover #gradient #transform

Live preview Buttons

Piston

Piston-button with a metallic cylindrical shaft.

#hover #gradient #transform

Live preview Buttons

8-bit Pixel Button

Blocky retro pixel-art button with stepped shadow and snappy press.

#hover #3d #shadow

Live preview Buttons

Planet Ring

Planet-button with an encircling ring.

#hover #gradient #transform

Live preview Buttons

Plasma Field

Electric purple plasma with shifting hues.

#animation #gradient #shadow

Live preview Buttons

Pliers

Pliers-button with crossed-grip pattern.

#hover #gradient #shadow

Live preview Buttons

Plum Velvet

Dark plum-purple velvet with sheen.

#hover #gradient #shadow

Live preview Buttons

Polar Frost

Icy polar blue with frosty edge.

#hover #gradient #transform

Live preview Buttons

Pomegranate Seed

Jewel-red pomegranate with seed speckles.

#hover #gradient #shadow

Live preview Buttons

Poppy Field

Bright poppy-red with a soft black center dot.

#hover #gradient #transform

Live preview Buttons

Porcelain Skin

Smooth porcelain white with subtle crackle.

#hover #gradient #transform

Live preview Buttons

Portico

Portico button with a temple-front pediment.

#hover #gradient #shadow

Live preview Buttons

Prairie Grass

Golden-tan prairie grass under sun.

#hover #gradient #shadow