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

Live preview Buttons

Fresh Mint Button

Crisp mint-green button with a fresh burst on hover.

#hover #gradient #transform

Live preview Buttons

Frieze

Frieze-band button with carved geometric relief.

#hover #gradient #shadow

Live preview Buttons

Frost Edge Button

Icy button with a frosted crystalline edge on hover.

#hover #transform #shadow

Live preview Buttons

Frozen Ice Button

Cyan button that appears frozen with ice crystals.

#hover #gradient #transform

Live preview Buttons

Fuchsia Tinge

Bright fuchsia button with a luminous tinge.

#hover #transform #shadow

Live preview Buttons

Fuel Gauge Button

Industrial button with a fuel gauge fill on hover.

#hover #gradient #transform

Live preview Buttons

Galactic

Galactic-core button with swirling violet-blue.

#hover #animation #gradient

Live preview Buttons

Galaxy Spiral

Galaxy-spiral button with rotating arm accents.

#hover #animation #gradient

Live preview Buttons

Galaxy Swirl Button

Deep-space button with a swirling galaxy gradient.

#animation #gradient #transform

Live preview Buttons

Galena Ore

Metallic galena lead-gray with cubic sheen.

#hover #gradient #shadow

Live preview Buttons

Gargoyle

Stone-gargoyle button with a deep gray patina.

#hover #gradient #shadow

Live preview Buttons

Garnet Stone

Deep red garnet gem with facet sheen.

#hover #gradient #transform

Live preview Buttons

Garnet Shade

Deep garnet-red button with shaded facets.

#hover #gradient #shadow

Live preview Buttons

Gauge

Pressure-gauge button with a dial needle.

#hover #gradient #transform

Live preview Buttons

Gazebo

Gazebo button with a soft roof-top gradient.

#hover #gradient #shadow

Live preview Buttons

Gazelle Leap

Tan gazelle-fawn button with leap animation.

#hover #gradient #transform

Live preview Buttons

Gear Cog

Industrial gear-cog button with toothed edges.

#hover #gradient #shadow

Live preview Buttons

Gear Rack

Gear-rack button with a horizontal toothed bar.

#hover #gradient #shadow

Live preview Buttons

Gecko Scales

Green gecko-skin with scale pattern.

#hover #gradient #shadow

Live preview Buttons

Gem Cut Button

Multifaceted gem button with a refractive look.

#hover #gradient #shadow

Live preview Buttons

Geyser

Geyser button with an erupting water plume.

#hover #gradient #transform

Live preview Buttons

Ghost Fade Button

Translucent ghost button that fades and drifts on hover.

#hover #transform #border

Live preview Buttons

Gingham Check

Classic red-white gingham picnic pattern.

#hover #gradient #shadow

Live preview Buttons

Ginkgo Leaf

Fan-shaped ginkgo-yellow leaf button.

#hover #gradient #shadow

Live preview Buttons

Girder

Heavy girder button with thick rivet dots.

#hover #gradient #shadow

Live preview Buttons

Glassmorphism Button

Frosted glass button with backdrop blur and subtle border highlight.

#gradient #hover #glass

Live preview Buttons

Glass Shine Button

A frosted glass panel with a diagonal highlight that sweeps across on hover.

#hover #gradient #shadow

Live preview Buttons

Glaze Ceramic Button

Glossy ceramic-glazed button with a soft sheen.

#hover #gradient #transform

Live preview Buttons

Glide Path

Aerospace glide path with subtle motion.

#animation #gradient #transform

Live preview Buttons

Glide Soft Button

Button that glides smoothly to the right on hover.

#hover #transform #border

Live preview Buttons

Glitch Button

Cyberpunk glitch button with RGB-split flicker on hover.

#animation #hover #shadow

Live preview Buttons

Glowing Ember

Black coals with glowing orange ember.

#hover #gradient #shadow

Live preview Buttons

Glow Pulse Ring

A button with an expanding glow ring that pulses outward continuously.

#animation #glow #hover

Live preview Buttons

Glow Trail Button

Button that leaves a glowing trail as it moves on hover.

#hover #transform #shadow

Live preview Buttons

Gold Leaf Button

Luxurious gold-leaf button with a flake texture.

#hover #gradient #transform

Live preview Buttons

Goldenrod

Warm goldenrod-yellow flower button.

#hover #gradient #shadow

Live preview Buttons

Gooseberry Vein

Green gooseberry with veined texture.

#hover #gradient #shadow

Live preview Buttons

Gorge Layer

Layered canyon gorge in red-orange.

#hover #gradient #shadow

Live preview Buttons

Gourd

Autumn-gourd button with rounded bulb shape.

#hover #gradient #shadow

Live preview Buttons

Gourmet Plated Button

Refined restaurant-style button with a fine rim.

#hover #transform #shadow

Live preview Buttons

Gradient Pulse Button

A button with an animated gradient background that shifts colors on hover.

#gradient #animation #hover

Live preview Buttons

Gradient Text Button

Transparent button with animated gradient-clipped text fill.

#gradient #animation #hover

Live preview Buttons

Grand Stage Button

Majestic purple button with a stage spotlight on hover.

#hover #gradient #transform

Live preview Buttons

Granite Stone Button

Speckled granite stone button with a rocky texture.

#hover #gradient #shadow

Live preview Buttons

Grape Cluster

Purple grape cluster with berry dots.

#hover #gradient #transform

Live preview Buttons

Gravel Path Button

Button with a scattered gravel pebble texture.

#hover #gradient #transform

Live preview Buttons

Grid Pulse Button

Dark button with a grid pattern that pulses on hover.

#hover #animation #gradient

Live preview Buttons

Grime Streak Button

Worn button with grime streaks and distressed edges.

#hover #gradient #transform

Live preview Buttons

Grip Handle Button

Ergonomic grip-textured button with rubber ridges.

#hover #gradient #shadow

Live preview Buttons

Vinyl Groove Button

Black button textured like a vinyl record groove.

#hover #animation #gradient

Live preview Buttons

Grouse Feather

Speckled brown grouse feather pattern.

#hover #gradient #shadow

Live preview Buttons

Guppy Fin

Tropical guppy orange-blue with fin shape.

#hover #gradient #transform

Live preview Buttons

Hacksaw

Hacksaw-button with serrated saw-tooth edge.

#hover #gradient #shadow

Live preview Buttons

Halley

Halley's-comet button with a long glowing tail.

#hover #gradient #shadow

Live preview Buttons

Halo Ring Button

Sacred button with a soft golden halo on hover.

#hover #gradient #transform

Live preview Buttons

Hammer Strike Button

Heavy button that strikes down with force on click.

#hover #transform #shadow

Live preview Buttons

Hammer Fall

Hammer-fall button with a downward strike accent.

#hover #gradient #shadow

Live preview Buttons

Harbor Bay Button

Deep harbor-blue button with a calm water line.

#animation #gradient #transform

Live preview Buttons

Harbor Light

Harbor-light button with a guiding warm glow.

#hover #gradient #shadow

Live preview Buttons

Hard Light Button

Neon button with a stark hard-light edge.

#hover #transform #shadow

Live preview Buttons

Harmony Blend Button

Pastel button with harmoniously blended dual-tone gradients.

#animation #gradient #shadow

Live preview Buttons

Has-Selector Loading Button

Clicking swaps the label for a spinner, driven purely by the :has() parent selector.

#animation #hover #transform

Live preview Buttons

Hatch Lines Button

Sketchy button with crosshatched shading lines.

#hover #gradient #transform

Live preview Buttons

Hawaii Surf

Hawaii-surf button with tropical turquoise.

#hover #gradient #transform

Live preview Buttons

Haze Mist Button

Misty button with a soft blurry haze on hover.

#hover #shadow #border

Live preview Buttons

Hazel Eye

Hazel-eye brown-green with golden ring.

#hover #gradient #transform

Live preview Buttons

Hazelnut

Hazelnut button with a warm bronze sheen.

#hover #gradient #shadow

Live preview Buttons

Heartbeat Pulse Button

Rose button that throbs like a beating heart, faster on hover.

#animation #hover #shadow

Live preview Buttons

Heather Bloom

Purple heather blooms across moorland.

#hover #gradient #shadow

Live preview Buttons

Hedgehog Spine

Brown hedgehog with spiky spine texture.

#hover #gradient #shadow

Live preview Buttons

Heliotrope

Magenta heliotrope button with sun-facing glow.

#hover #gradient #transform

Live preview Buttons

Helix Spin Button

DNA helix button that spins on its axis on hover.

#hover #animation #gradient

Live preview Buttons

Hematite

Hematite-iron button with a metallic sheen.

#hover #gradient #shadow

Live preview Buttons

Henna Stain

Red-brown henna stain with ornate feel.

#hover #gradient #shadow

Live preview Buttons

Hex Pattern Button

Tech button with a hexagonal honeycomb pattern background.

#hover #gradient #border

Live preview Buttons

Hibiscus Bloom

Tropical hibiscus red with yellow stamen.

#hover #gradient #transform

Live preview Buttons

High Voltage Button

Danger button with a yellow caution stripe and voltage glow.

#hover #gradient #transform

Live preview Buttons

Highland Mist

Misty Scottish highland green-gray.

#hover #gradient #shadow

Live preview Buttons

Hint Tooltip Button

Small button that reveals a hint tooltip on hover.

#hover #transform #border

Live preview Buttons

Hive Comb Button

Amber honeycomb button with hex cells glowing on hover.

#hover #gradient #shadow

Live preview Buttons

Holly Berry

Holly-green button with bright red berry dots.

#hover #gradient #shadow

Live preview Buttons

Hollyhock Stalk

Pink hollyhock along tall green stalk.

#hover #gradient #transform

Live preview Buttons

Holographic Shimmer Button

Iridescent holographic foil that shifts rainbow colors across the button.

#gradient #animation #hover

Live preview Buttons

Honey Drip Button

Golden honey button with a slow drip on the bottom edge.

#animation #gradient #transform

Live preview Buttons

Horizon Line Button

Sunset button with a glowing horizon line on hover.

#hover #gradient #transform

Live preview Buttons

Horizon Glow

Sunset horizon with warm orange glow.

#hover #gradient #shadow

Live preview Buttons

Horizon Line

Horizon-line button with sun-meets-sea accent.

#hover #gradient #transform

Live preview Buttons

Hover Glow Soft Button

Soft button with a deep ambient glow appearing on hover.

#hover #shadow #border

Live preview Buttons

Hover Lift Shadow

Clean button that lifts up with an elongated shadow on hover.

#hover #shadow #border

Live preview Buttons

Hum Vibration Button

Subtle button that hums with tiny vibrations on hover.

#hover #animation #transform

Live preview Buttons

Husk Shell Button

Earthy button textured like a corn husk shell.

#hover #gradient #transform

Live preview Buttons

Hydraulic Press

Hydraulic-press button with steel-blue pressure depth.

#hover #gradient #transform

Live preview Buttons

Ice Floe

Ice-floe button with a frozen white-blue surface.

#hover #gradient #transform

Live preview Buttons

Ice Glow Button

Pale cyan button with an icy inner glow.

#hover #gradient #transform

Live preview Buttons

Icon Swap Button

Plus icon slides up and out, replaced by a green checkmark sliding in.

#hover #border #transform

Live preview Buttons

Ignite Spark Button

Dark button that ignites with a flame on hover.

#hover #gradient #transform