Toggles — 860 CSS effects

Toggle controls with clear states and refined transitions.

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 Toggles

Nova Burst

Stellar burst radiates from the knob as the nova ignites.

#gradient #transform #shadow

Live preview Toggles

NPC / Boss

Plain NPC knob becomes a glowing boss on toggle.

#transform #shadow

Live preview Toggles

Ocean / Beach

Deep ocean waves roll into a sunny beach scene.

#gradient #transform #shadow

Live preview Toggles

Oil Slick

Iridescent oil-slick shimmer across a dark puddle track.

#animation #gradient #transform

Live preview Toggles

Online / Away

Green online dot shifts to an amber away indicator.

#animation #transform #shadow

Live preview Toggles

Online / Offline

Green status dot means online, red means offline.

#transform #shadow

Live preview Toggles

Onyx Shadow

Black onyx stone with mysterious shadow.

#gradient #transform #shadow

Live preview Toggles

Opal Fire

Fiery opal with multi-color flash.

#gradient #transform #shadow

Live preview Toggles

Opal / Jadeite

Multicolor opal knob focuses into a deep jadeite green.

#gradient #transform #shadow

Live preview Toggles

Opaque / Transparent

Solid knob fades to transparency on the violet track.

#transform #shadow

Live preview Toggles

Open / Close Door

Door-panel knob swings open with a 3D rotateY and red-to-green track shift.

#transform #shadow

Live preview Toggles

Open / Closed Door

Door swings open then shuts tight.

#transform #shadow

Live preview Toggles

Orbit / Gravity

Floating knob gets captured into a gravity orbit.

#animation #gradient #transform

Live preview Toggles

Orbit / Station

Orbiting moon knob docks at a station on toggle.

#animation #gradient #transform

Live preview Toggles

Orbital Ring

Satellite orbits a planetary knob as it slides across.

#animation #gradient #transform

Live preview Toggles

Orchid Bloom

Orchid purple-pink bloom with petal knob.

#gradient #transform #shadow

Live preview Toggles

Organza Crisp

Crisp organza fabric with a subtle iridescent shimmer.

#animation #gradient #transform

Live preview Toggles

Outline / Fill

Hollow outline knob fills in with solid color.

#transform #shadow #border

Live preview Toggles

Oxidized Copper

Copper surface oxidizing to verdigris patina green.

#gradient #transform

Live preview Toggles

Pack / Unpack

Packed box opens to an empty box on a brown-to-tan track.

#transform #shadow

Live preview Toggles

Pair / Unpair

Signal knob loses connection on the slate track when unpaired.

#transform #shadow

Live preview Toggles

Park / Drive

Gear shifter moves from P to D position.

#transform #shadow #border

Live preview Toggles

Past / Future

Back arrow flips forward to point into the future.

#transform #shadow

Live preview Toggles

Patina Iron

Aged iron with rustic patina and weathered texture.

#gradient #transform #shadow

Live preview Toggles

Pause / Resume

Pause symbol morphs into a play triangle.

#transform #shadow

Live preview Toggles

Pearl Dew

Pearl morning dew with translucent sheen.

#gradient #transform #shadow

Live preview Toggles

Pearl Glow

Luminous pearl white with iridescent sheen.

#gradient #transform #shadow

Live preview Toggles

Pearl / Onyx

Iridescent pearl knob darkens to a glossy onyx black.

#gradient #transform #shadow

Live preview Toggles

Pearlescent Shine

Pearlescent surface with soft lustrous pearl sheen.

#animation #gradient #transform

Live preview Toggles

Pending / Done

Spinning hourglass becomes a checkmark when done.

#animation #transform #shadow

Live preview Toggles

Pendulum Swing

Grandfather clock pendulum swings rhythmically across.

#animation #gradient #transform

Live preview Toggles

Periwinkle Dawn

Soft periwinkle dawn with sky-blue knob.

#gradient #transform #shadow

Live preview Toggles

Perk / Trait

Perk ribbon knob becomes a DNA trait on toggle.

#transform #shadow

Live preview Toggles

Permit / Deny

Check permit knob becomes a deny sign on the green track.

#transform #shadow

Live preview Toggles

Persimmon Warm

Warm persimmon orange with autumn glow.

#gradient #transform #shadow

Live preview Toggles

Petal Fall

Sakura petal drifts down across the spring track.

#animation #gradient #transform

Live preview Toggles

Pewter Bloom

Pewter grey with subtle bloom glow.

#gradient #transform #shadow

Live preview Toggles

Pewter Mist

Misty pewter grey with subtle haze knob.

#gradient #transform #shadow

Live preview Toggles

Pewter Shade

Muted pewter grey with metallic knob.

#gradient #transform #shadow

Live preview Toggles

Pill Morph Toggle

Track morphs from pill to square corners and changes color when toggled.

#shadow #border #transform

Live preview Toggles

Pin / Unpin

Thumbtack pins down or pops up to unpin.

#transform #shadow

Live preview Toggles

Pine Cone

Woody pine cone knob scales open when dried.

#gradient #transform

Live preview Toggles

Pink / Cyan

Hot pink neon swaps to electric cyan.

#transform #shadow

Live preview Toggles

Pistol / Rifle

Pistol knob becomes a rifle on the dark steel track.

#transform #shadow

Live preview Toggles

Piston Pump

Hydraulic piston pumps up and down with mechanical rhythm.

#animation #gradient #transform

Live preview Toggles

Pitch / Flat

Knob moves vertically up for high pitch and levels flat on toggle.

#gradient #transform #shadow

Live preview Toggles

Pixel Heart

Pixel-art heart knob fills with red when loved.

#transform

Live preview Toggles

Pixel Shift

Pixelated knob slides in chunky 8-bit steps across the track.

#transform #shadow

Live preview Toggles

Plane / Boat

Air travel switches to sea voyage.

#transform #shadow

Live preview Toggles

Planet Orbit

Satellite orbits a planet when system is active.

#animation #transform #shadow

Live preview Toggles

Planet Ring

Ringed planet knob orbits with its ring tilted in space.

#gradient #transform #shadow

Live preview Toggles

Platinum Edge

Polished platinum with sharp edge knob.

#gradient #transform #shadow

Live preview Toggles

Player / AI

Human player knob becomes a robot AI on toggle.

#transform #shadow

Live preview Toggles

Plug / Unplug

Plug knob slides out to disconnect on the yellow track.

#transform #shadow

Live preview Toggles

Polished Brass

Mirror-polished brass with warm golden reflective glow.

#animation #gradient #transform

Live preview Toggles

Porcelain Doll

Delicate porcelain white with smooth glossy knob.

#gradient #transform #shadow

Live preview Toggles

Porcelain Smooth

Glossy porcelain with smooth translucent glaze.

#gradient #transform #shadow

Live preview Toggles

Potion / Scroll

Potion knob becomes an ancient scroll on the emerald track.

#transform #shadow

Live preview Toggles

Pour / Empty

Droplet knob drips downward as the blue track fades to pale.

#transform #shadow

Live preview Toggles

Powder Coat

Durable powder-coated surface with matte finish.

#gradient #transform #shadow

Live preview Toggles

Power Button Toggle

Circular power symbol that lights up with a pulsing ring when active.

#gradient #animation #shadow

Live preview Toggles

Power / Energy

Lightning bolt knob becomes a battery on the amber track.

#transform #shadow

Live preview Toggles

Power Surge

Lightning power surge crackles around the active knob.

#animation #gradient #transform

Live preview Toggles

Power Switch Toggle

A round power button that lights up and hums with a soft ring when switched on.

#animation #gradient #shadow

Live preview Toggles

Press / Hold

Knob enlarges when held on the indigo track.

#transform #shadow

Live preview Toggles

Prism Shine

Prism knob refracts incoming light into a rainbow beam.

#gradient #transform #shadow

Live preview Toggles

Private / Public Mode

Lock knob becomes a globe when switching from private to public mode.

#transform #shadow

Live preview Toggles

Profile / Anonymous

User avatar disguises into an anonymous silhouette.

#transform #shadow

Live preview Toggles

Property Glow Toggle

Turning it on starts a registered angle animating, spinning a conic glow behind the track.

#animation #gradient #filter

Live preview Toggles

Proud / Humble

Bowing humble figure rises into a proud peacock.

#transform #shadow

Live preview Toggles

Proxy / Direct

Shield proxy knob becomes a direct arrow on the violet track.

#transform #shadow

Live preview Toggles

Public / Private

Globe shifts to a lock when going private.

#transform #shadow

Live preview Toggles

Pulsar Beam

Pulsar star emits rotating beams of radiation.

#animation #gradient #transform

Live preview Toggles

Pulse / Steady

Pulsing knob steadies on the indigo track when toggled.

#animation #transform #shadow

Live preview Toggles

Purple / Yellow

Royal purple yields to a sunny yellow.

#transform #shadow

Live preview Toggles

Push / Pull

Push up arrow knob flips into a pull down arrow on toggle.

#transform #shadow

Live preview Toggles

Pyrite Gold

Fool's gold pyrite with cubic shine.

#gradient #transform #shadow

Live preview Toggles

Quantum Spin

Particle-like knob spins on its axis while transitioning states.

#animation #gradient #transform

Live preview Toggles

Quartz / Obsidian

Clear quartz knob darkens into black obsidian glass.

#gradient #transform #shadow

Live preview Toggles

Quartz Vein

Quartz crystal vein with mineral sparkle.

#gradient #transform #shadow

Live preview Toggles

Quasar Jet

Quasar emits a brilliant jet of energy across the track.

#gradient #transform #shadow

Live preview Toggles

Quest / Task

Exclamation quest knob becomes a checkmark task on toggle.

#transform #shadow

Live preview Toggles

Queue / Stack

Clipboard queue knob becomes a stacked books on toggle.

#transform #shadow

Live preview Toggles

Quick / Gradual

Knob snaps quickly one way and eases gradually the other.

#transform #shadow

Live preview Toggles

Quiet / Noisy

Silent icon bursts into sound waves when noisy.

#animation #transform #shadow

Live preview Toggles

Quill Write

Quill pen knob leaves an ink trail as it slides.

#gradient #transform

Live preview Toggles

Radar Blip

Single radar blip pulses outward when target is detected.

#animation #gradient #transform

Live preview Toggles

Sun / Rain Cloud

Sky flips between a shining sun and a gray cloud with falling raindrops.

#gradient #animation #shadow

Live preview Toggles

Rainbow Arc

A rainbow arc sweeps across the track when toggled on.

#gradient #transform #shadow

Live preview Toggles

Range / Cast

Arrow knob becomes a spell cast swirl on toggle.

#transform #shadow

Live preview Toggles

Rapids / Still

Turbulent rapids knob settles into still water on toggle.

#animation #transform #shadow

Live preview Toggles

Read / Write

Book becomes a pen to toggle write access.

#transform #shadow

Live preview Toggles

Read / Write

Book read knob becomes a pencil write on the indigo track.

#transform #shadow

Live preview Toggles

Record Light

REC indicator blinks red when recording is active.

#animation #gradient #transform

Live preview Toggles

Red / Green

Red prohibition dot becomes a green go-ahead.

#transform #shadow