CSS 按钮:交互样式
css · beginner · 15-20 min · Step 1/5CSS 按钮设计
按钮状态
.btn {
background: #3b82f6;
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
padding: 10px 24px;
transition: all 0.2s;
}
.btn:hover {
background: #2563eb;
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
按钮变体
| 变体 | 特点 |
|---|---|
| Primary | 实心背景,主色调 |
| Secondary | 边框,无填充 |
| Ghost | 透明背景,hover 变色 |
| Icon | 只有图标,圆形 |