Category · sds-btn-*

100 Buttons CSS animations

Ambient, hover, entrance and kinetic effects for buttons and other interactive elements. The buttons bundle is 8.6 KB gzip (49.1 KB minified).

Import only this category

import "@salkomdesignstudio/sds-motion-forge/categories/buttons";

Or use the CDN: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/buttons.min.css. Core (tokens, modifiers, reduced-motion) is already inside each category bundle; to use two or more categories, load the full https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css instead.

All 100 buttons animations

• Amp .sds-btn-amp — Amp — button animation
• Aurora .sds-btn-aurora — Aurora — button animation
• Beacon .sds-btn-beacon — One ring ping every couple of seconds with true rest between — rhythm, not noise
• Blinds .sds-btn-blinds — A slatted cover wipes away in four steps, revealing the button like opening blinds
• Border Flow .sds-btn-border-flow — Border Flow — button animation
• Bounce .sds-btn-bounce — Bounce — button animation
• Breath Hold .sds-btn-breath-hold — Inhale, hold at the top, quick exhale — asymmetric breathing that draws the eye
• Burst .sds-btn-burst — Burst — button animation
• Charge .sds-btn-charge — Charge — button animation
• Crystal .sds-btn-crystal — Crystal — button animation
• Depth Press .sds-btn-depth-press — Depth Press — button animation
• Dissolve .sds-btn-dissolve — Dissolve — button animation
• Draw Corners .sds-btn-draw-corners — Four corner brackets pop in from outside and snap onto the corners with spring
• Draw Cross .sds-btn-draw-cross — Two diagonal light lines sweep across in opposite directions, crossing mid-button
• Draw Dash .sds-btn-draw-dash — A dashed frame appears segment-by-segment, dims, then solidifies bright before resetting
• Draw Perimeter .sds-btn-draw-perimeter — Border draws itself around the button, clicks at full frame, then fades for the next pass
• Draw Pulse Frame .sds-btn-draw-pulse-frame — Frame draws once, then breathes outward with fading echoes
• Underline Orbit .sds-btn-draw-underline-orbit — Underline draws under the label, then swings a full orbit and parks back home
• Edge Trace .sds-btn-edge — Border traces the perimeter sequentially
• Ember .sds-btn-ember — Heat shimmer: micro-skew, warm hue drift, and an ember glow that brightens on the exhale
• Energy Ripple .sds-btn-energy — Double box-shadow ripple propagates out
• Fill Corner .sds-btn-fill-corner — Tint unfolds diagonally from the top-left corner with a −0.5° settle
• Fill Drain .sds-btn-fill-drain — Fill drains to the floor, pauses empty, then refills — a patient three-act loop
• Fill Iris .sds-btn-fill-iris — Tint blooms from the center as an iris while the button breathes 0.985→1 on a spring
• Fill Rise .sds-btn-fill-rise — Liquid sheet rises from the floor with a wobbling top edge, levels off, then ebbs away
• Fill Split .sds-btn-fill-split — Two half-fills race from opposite edges and seal mid-button with a decaying flare
• Fill Sweep .sds-btn-fill-sweep — Skewed tint sweeps across with a brightness kiss, holds, then exits with momentum
• Fill Wave .sds-btn-fill-wave — A tilted wave climbs in and levels flat while the label bobs once above it
• Fire .sds-btn-fire — Fire — button animation
• Flare .sds-btn-flare — Flare — button animation
• Float .sds-btn-float — Float — button animation
• Flux .sds-btn-flux — Flux — button animation
• Glow Core .sds-btn-glow-core — Glow Core — button animation
• Glow Surge .sds-btn-glow-surge — Subtle outer glow that breathes
• Gradient Shift .sds-btn-gradient-shift — Gradient Shift — button animation
• Gravity .sds-btn-gravity — Gravity — button animation
• Gravity Pull .sds-btn-gravity-pull — Gravity Pull — button animation
• Guillotine .sds-btn-guillotine — The top half drops onto the emerging bottom half with a landing squash
• Halo Breathe .sds-btn-halo-breathe — A soft halo grows and recedes with brightness in sync — calm, steady presence
• Halo Flicker On .sds-btn-halo-flicker-on — Powers on through three stepped flickers, then the halo blooms and holds
• Halo Split .sds-btn-halo-split — The glow splits into two lobes that drift apart, dissolve, and re-merge each cycle
• Heartbeat .sds-btn-heartbeat — Heartbeat — button animation
• Hologram .sds-btn-hologram — Hologram — button animation
• Ice .sds-btn-ice — Ice — button animation
• Icon Launch .sds-btn-icon-launch — The icon winds up, rockets forward with motion blur, and glides back as the label leans after it
• Icon Spin Settle .sds-btn-icon-spin-settle — The icon overshoots a full spin (380°→360°) while the label squeezes in sympathy
• Kinetic .sds-btn-kinetic — Kinetic — button animation
• Label Slide .sds-btn-label-slide — The label slides up and out, then returns from below with a soft overshoot — a quiet refresh tick
• Label Typewrite .sds-btn-label-typewrite — Label pieces type in on a stepped cascade, hold, then clear for the next pass
• Label Wave .sds-btn-label-wave — Label pieces ripple a 2px wave left to right with tiny rotations
• Lift Shadow .sds-btn-lift — Lifts with a growing depth shadow
• Liquid Fill .sds-btn-liquid — Background fills from right to left
• Magnetic Pulse .sds-btn-magnetic — Outward pulse ring on a loop
• Magnetic Trail .sds-btn-magnetic-trail — Magnetic Trail — button animation
• Momentum .sds-btn-momentum — Momentum — button animation
• Morph Pill .sds-btn-morph — Border-radius morphs between rect/pill
• Neon Sign .sds-btn-neon — Neon box-shadow with a flicker glitch
• Neon Trace .sds-btn-neon-trace — Neon Trace — button animation
• Night Sweep .sds-btn-night-sweep — A dark veil wipes off to reveal the lit button, rests, then falls again
• Nudge .sds-btn-nudge — The trailing chevron nudges forward twice with decaying amplitude — the go-on gesture
• Outline Grow .sds-btn-outline-grow — Outline Grow — button animation
• Plasma Glow .sds-btn-plasma — Plasma-like glow shifts through colours
• Press Depth .sds-btn-press — Presses down as if physically clicked
• Press Coin .sds-btn-press-coin — Tips 12° like a pressed coin edge while its shaded side deepens, then rights itself
• Press Drop .sds-btn-press-drop — Falls in from above, lands with a squash and a single dust ring
• Press Elastic .sds-btn-press-elastic — Horizontal tug stretches it wide then tall, snapping back through a three-bounce decay
• Press Pop .sds-btn-press-pop — Anticipation dip, pop past full size, settle — the label leads the button by a beat
• Press Seesaw .sds-btn-press-seesaw — Alternating corner tilts decay to rest, like a key that hasn't seated yet
• Press Spring .sds-btn-press-spring — Drops 3px with a squash, then rebounds through a two-step spring — the press you can feel
• Prism Edge .sds-btn-prism-edge — A spectral border cycles hue while sweeping emphasis around the frame
• Pulse Border .sds-btn-pulse-border — Pulse Border — button animation
• Quantum Stamp .sds-btn-quantum — Scale-in with elastic overshoot
• Radar .sds-btn-radar — Radar — button animation
• Recoil .sds-btn-recoil — Recoil — button animation
• Ripple .sds-btn-ripple — Ripple — button animation
• Rotate .sds-btn-rotate — Rotate — button animation
• Scan .sds-btn-scan — Scan — button animation
• Sheen Double .sds-btn-sheen-double — Two sheens cross from opposite ends, flaring where they meet mid-button
• Sheen Pass .sds-btn-sheen-pass — A glossy bar sweeps across at a skew with a brightness kiss at center
• Shimmer .sds-btn-shimmer — Shimmer — button animation
• Shockwave .sds-btn-shock — Outline rings expand outward in a pulse
• Shutter Snap .sds-btn-shutter-snap — A diamond iris pinches almost closed, holds, then snaps open with overshoot
• Slice Hover .sds-btn-slice-hover — Top and bottom halves shear apart for two frames like a shutter glitch, then realign
• Slice Reveal .sds-btn-slice-reveal — Assembles as top and bottom edges arrive out of phase, sealing with a brightness flash
• Spark Orbit .sds-btn-spark-orbit — A glowing spark rides the button's outline in a full lap, dimming on the far side
• Split .sds-btn-split — Split — button animation
• Spotlight Pan .sds-btn-spotlight-pan — A soft radial spotlight pans corner to corner; the label brightens as it passes
• Stretch .sds-btn-stretch — Stretch — button animation
• Surge Charge .sds-btn-surge-charge — Gathers (dims), surges bright with a halo flare, then calms — a three-act energy cycle
• Swap Flip .sds-btn-swap-flip — Icon and label trade a crossing gesture — passing each other with a dip, then re-seating
• Swipe .sds-btn-swipe — Swipe — button animation
• Tick Tock .sds-btn-tick-tock — Metronome micro-rotation with an end-of-bar accent scale
• Tilt .sds-btn-tilt — Tilt — button animation
• Tilt Float .sds-btn-tilt-float — Levitates with a Y-bob, a 1.2° roll, and a drop-shadow that breathes with the height
• Tilt Orbit .sds-btn-tilt-orbit — The button leans through a slow elliptical orbit on two phase-shifted axes
• Tilt Pendulum .sds-btn-tilt-pendulum — Hangs from its top edge and swings with natural decay, re-energizing each cycle
• Tilt Scan .sds-btn-tilt-scan — Leans corner-to-corner with brief holds, as if scanning for the cursor
• Volt Strike .sds-btn-volt — High-voltage border pulse
• Warp .sds-btn-warp — Warp — button animation
• Wink .sds-btn-wink — A corner highlight blinks twice every few seconds, then keeps a straight face

Browse all categories · Installation & usage docs