按钮 · 加载 · 开关
海量免费开源 UI 微元素 —— 按钮、加载器、复选框、开关、输入框。纯 HTML/CSS，源码直接复制到你的项目中。
A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Mono Pearl palette.
A 2px conic-gradient border slowly spins around a glass card via @property angle animation — pro upgrade cards.
An outlined ghost button whose label is swept by a skewed gradient fill on hover. Rendered in the Aurora Teal palette.
A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Candy Pink palette.
A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Deep Indigo palette.
A shell-command hash chip with a $ prompt and an inline copy button that flips to a green ✓ confirmation.
Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Crimson Heat palette.
A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Mono Pearl palette.
A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Cyber Lime palette.
A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Rose Gold palette.
Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Ultra Violet palette.
A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Cyber Lime palette.
A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Royal Gold palette.
A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Deep Indigo palette.
A checkbox whose checkmark is stroke-drawn with a dash animation when ticked. Rendered in the Aurora Teal palette.
A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Candy Pink palette.
A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Mint Breeze palette.
A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Deep Indigo palette.
A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Sunset Amber palette.
A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Mint Breeze palette.
A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Crimson Heat palette.
A calming zero-state: drifting gradient orb with dashed orbit ring, empty copy and a soft CTA. Rendered in the Sunset Amber palette.
A pill toggle switch whose knob springs across and sets the track glowing when enabled. Rendered in the Ultra Violet palette.
A round icon button that springs open: the burger bars morph into a close X with a rotation. Rendered in the Cyber Lime palette.
A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Royal Gold palette.
A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Crimson Heat palette.
A text field with a floating label and a gradient focus ring that breathes. Rendered in the Candy Pink palette.
A row of status chips: pulsing live dot, outlined beta tag and a gradient PRO pill. Rendered in the Mono Pearl palette.
A gradient call-to-action button with a breathing neon glow ring and a sliding arrow on hover. Rendered in the Rose Gold palette.
Interactive five-star rating with gradient-filled stars and a springy pop on select. Rendered in the Cyber Lime palette.
Five gradient bars pumping like an audio equalizer with staggered scaleY animation. Rendered in the Candy Pink palette.
A velvety range control: glowing fill, pulsing thumb and a springy value bubble that trails the drag. Rendered in the Ultra Violet palette.
A bright light travels around the card's border via an animated conic-gradient mask and @property angle.
Primary button with neon glow, hover lift and active press effect.
Button with animated gradient border using a rotating conic background.
Button with a diagonal light sweep shimmer across its surface on hover.
Small badge with a pulsing ring to signal live/active status.
Determinate progress bar with striped animation and percentage.
Accessible switch with knob travel animation and checked glow.
A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Aurora Teal palette.
Backdrop-blur pricing tiers floating over animated aurora blobs; the popular plan scales up with a gradient flag.
A text field with a floating label and a gradient focus ring that breathes. Rendered in the Ocean Sky palette.
A text field with a floating label and a gradient focus ring that breathes. Rendered in the Royal Gold palette.
A ⌘K-style palette: type to filter actions, arrow keys to move, Enter to run — with shortcut hints. Rendered in the Crimson Heat palette.
Radio select styled as a card with ring highlight when chosen.
Input with floating label that lifts and shrinks on focus.
Search field with leading icon and clear button on input.
Compact tag pill with optional remove icon on hover.
Hover tooltip with fade/scale entrance and arrow pointer.
Interactive star rating with hover preview and filled state.