Button 按钮

触发操作或事件的基础组件

实时预览

引入

<link rel="stylesheet" href="/tokens/tokens.css">
<link rel="stylesheet" href="/components/button/button.css">

代码

HTML

<!-- Button Component — 4 variants, 3 sizes, icon support -->


<!-- Demo: Button 组件 -->
<div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
  <button class="btn btn--primary btn--lg">
    <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
    开始使用
  </button>
  <button class="btn btn--primary btn--md">主要按钮</button>
  <button class="btn btn--secondary btn--md">次要按钮</button>
  <button class="btn btn--ghost btn--md">幽灵按钮</button>
  <button class="btn btn--danger btn--sm">删除</button>
</div>

CSS

/* Button.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Sizes ──────────────────────────── */
.btn--sm { padding: 6px 14px; font-size: var(--text-sm); }
.btn--md { padding: 10px 22px; font-size: var(--text-base); }
.btn--lg { padding: 14px 32px; font-size: var(--text-lg); }

/* ── Variants ───────────────────────── */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary-dark);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn--ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}
.btn--danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* ── Icon ───────────────────────────── */
.btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* ── Ripple effect ──────────────────── */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
  transform: scale(10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.3s;
}
.btn:active::after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}

AI 使用说明

组件名: button
选择器: .button
依赖: /tokens/tokens.css
文件: /components/button/button.html