Component theme

Buttons & Toggles

24 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• Magnetic ButtonDark pill button drifts in an idle orbital float; cursor proximity pulls it magnetically with a label inner-parallax and emerald-to-copper glow on hover.…
• Gooey Liquid TogglePill toggle where an SVG goo-filtered blob stretches and merges as it slides from off to on, shifting grey to magenta. Auto-cycles as demo.
• Morphing Action FABGradient FAB whose plus icon rotates 135° to an X on click, fanning six icon buttons outward in a staggered radial spring animation. Auto-cycles in demo mode.
• Material RippleDark rounded button that spawns an expanding ink ripple from the tap point; idles by firing ripples from random positions every 1.5 s.
• Neon Glow PulseAmber pill button on near-black that breathes a bright neon bloom via opacity pulse on a pseudo-element; hover shifts background and text color.
• Jelly PressAurora-gradient button squashes and stretches with a spring keyframe animation on click; cycles autonomously until first deliberate input idle squish…
• Stroke-Draw OutlineGhost button whose rounded-rect SVG border self-draws via stroke-dashoffset on hover; an autonomous preview cycle that stops at first deliberate input…
• Sliding FillOutlined button where a copper-to-emerald gradient sweeps in from the left on hover, filling the button and flipping text dark. cycles autonomously until…
• Confetti BurstMagenta pill button fires 26 colorful confetti squares and circles in a physics arc on click; bursts autonomously until first deliberate input every 2.3 s…
• 3D Push ButtonMagenta-to-gold gradient button with a layered edge and drop shadow that depresses on press and springs back, mimicking a physical key. Auto-cycles as demo.
• Thanos Snap DeleteRed DELETE button that disintegrates into up to 96 drifting dust particles on click. Particles drift right and fade; a Restore link resets the state.
• Seamless Stroke ButtonA hairline button whose border carries one short dash travelling the frame forever; on hover the accent draws the whole frame in and the label brightens,…
• Async Action ButtonA copy button that runs its own three states: idle, working (a short accent arc spins in the icon slot while the label reads 'copying') and done (the…
• Wax Seal ButtonA parchment plaque with an engraved register (accession, object, destination) and a Pompeii-red wax-seal button: the wax disc sinks on press, a…
• Ceramic Toggle TilesThree glazed square tiles on grout, each carrying a generated motif (quatrefoil, lattice, pinwheel) with a glaze sheen, an uppercase label, a description…
• Clay Press ToggleThree settings rows on a pressed-fibre card, each a real checkbox behind an unfired clay tile: raised fibre when off, pressed pigment with paper tooth and…
• Dawn to Dusk SegmentedA four-way segmented control (dawn, morning, midday, dusk) whose indicator slides in 220 ms while a soft radial pigment wash behind the panel shifts…
• Arcade Microswitch PushbuttonArcade Microswitch Pushbutton control in the 8-Bit Gaming system.
• Studio Recording Tally RockerStudio Recording Tally Rocker control in the Sam Creates system.
• Terracotta Kiln LatchTerracotta Kiln Latch control in the Urban Azulejo system.
• Hold-to-Shatter CTAPress-and-hold destructive button that vibrates as it charges, then bursts into shards at full charge, with a reconstruct control.
• Orbital Gravity ButtonCommit button ringed by orbiting particles that contract under the cursor, pulse outward when toggled and turn lime when deployed.
• Mercury Tilt ToggleGlass ampoule tilt switch: a mercury bead rolls under simulated gravity, squashes on impact and bridges the contact pins.
• Ferrofluid Snap SwitchMagnetic switch: a ferrofluid drop stretches toward the cursor, merges with its anchors and snaps across on release.