立体按压

按钮立在一块实心底座上，按下时整块沉下去，像一颗按到底的实体按键。

CSS
按钮
点击
收录于 2026-10-29

AI 提示词

用纯 CSS 制作立体按压按钮。用 box-shadow: 0 6px 0（比主色更深的颜色）给按钮一个实心底边，悬停时上抬 2px（translateY(-2px)，阴影改为 0 8px 0）。:active 时 translateY(6px)，阴影改为 0 0 0，让按钮面沉到与底座齐平。transform 和 box-shadow 过渡 90ms ease-out，让按压感觉即时，松开时稍慢一些。保留清晰的焦点框。在 prefers-reduced-motion 下保留按压时的颜色变化，去掉位移。按钮文字为“开始游戏”。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function Press3d({ labels }: { labels: Record<string, string> }) {
  return (
    <button type="button" className={s.button}>
      {labels.cta}
    </button>
  )
}

demo.module.css

.button {
  --edge: color-mix(in oklch, var(--stage-accent) 55%, black);
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 500 var(--text-base) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  background: var(--stage-accent);
  color: var(--stage-accent-ink);
  font-weight: 600;
  box-shadow: 0 6px 0 var(--edge);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color var(--dur-micro);
}

.button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--edge); }

.button:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--edge);
  transition-duration: 90ms;
}

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

@media (prefers-reduced-motion: reduce) {
  .button, .button:hover, .button:active { transform: none; }
  .button:active { background: var(--stage-accent-hover); }
}