Button
按钮
Aliases:按钮按键点击按钮主按钮提交按钮CTA 按钮
What is it
A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
Interactive playground
Try it. Make an informed choice.Save in the local simulation, cancel while pending, then retry with the keyboard. Compare 21 styles and four button levels.
Loading lab…
What to look for
- 01Usually give one action the strongest emphasis in a region.
- 02Prevent duplicate activation while processing and show the result.
- 03Cancelling a pending action must suppress late success callbacks and allow retry.
- 04Enter / Space and pointer activation trigger the same behavior, with visible focus and touch targets at least 44px tall.
✓ When to use
- A user-initiated action such as submit, create or confirm
- Multiple actions coexist and need visual hierarchy
- The action mutates data and must guard against double submits
✕ When not to use
- Pure navigation — a link matches expectations better
- Frequently toggled reversible state — use a switch or checkbox
- Many repeated secondary actions — demote to text buttons to cut noise
Variants
Primary
主要
Solid fill — the single primary action per view
Secondary
次要
Outlined style, paired with the primary
Ghost
幽灵
Borderless text-only, minimal visual weight
Danger
危险
Warning color for irreversible actions
Implementation
transitiontransform: scale(0.97)backgroundbox-shadowTransition colors and shadows smoothly; add scale(0.97) on the press frame. Keep a focus-visible ring for keyboard access. In the busy state swap the label for a spinner while disabled, preserving width to avoid layout shift. Touch targets should be at least 44px tall.
Platform API
<button>typerole="button"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Compare
Full comparison →| Button按钮 | Press Feedback按压反馈 | |
|---|---|---|
| Intensity | Low to medium — a subtle sink is enough | Medium, restrained |
| Mobile friendly | Good — keep touch targets ≥ 44px | Good — triggers on press |
| Best for | Buttons / small clickable blocks | Buttons / small cards |
Related concepts
When users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionAlternativeA translucent circle expands from the exact tap point and fades out, visualising where the press landed. Material Design's signature press feedback — it gives clicks a physical sense, like a stone dropped on water.
MotionUsed withAs the cursor approaches, the button is pulled toward it like iron to a magnet, then springs home on leave. The offset is computed from cursor-to-center distance and usually clamped to 8–20px. A tactile desktop flourish common on portfolios and creative sites.
MotionUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed withA continuously rotating ring or dots that says "work in progress". Tiny in footprint and universally understood, it fits inside buttons, cursors or small regions as lightweight feedback. It communicates busyness only — neither progress amount nor time remaining.
MotionUsed with