CSS 按钮
按钮颜色/尺寸/圆角/边框/阴影/悬停/禁用 完整按钮样式
CSS 按钮
纯 CSS 就能做出漂亮的按钮——颜色、尺寸、圆角、阴影、悬停效果全部可控。
学完本章你将： 掌握按钮基本样式、颜色变体、尺寸、状态。
基本按钮
css
.btn {
display: inline-block;
padding: 12px 28px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: all 0.3s;
}颜色变体
css
.btn-primary { background: #4CAF50; color: white; }
.btn-primary:hover { background: #45a049; }
.btn-danger { background: #f44336; color: white; }
.btn-danger:hover { background: #da190b; }
.btn-outline {
background: transparent;
border: 2px solid #4CAF50;
color: #4CAF50;
}
.btn-outline:hover { background: #4CAF50; color: white; }尺寸
css
.btn-sm { padding: 6px 14px; font-size: 14px; }
.btn-lg { padding: 16px 36px; font-size: 20px; }
.btn-block { display: block; width: 100%; } /* 通栏按钮 */阴影与圆角
css
.btn-shadow { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn-shadow:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.btn-round { border-radius: 50px; } /* 胶囊形 */
.btn-circle { /* 圆形（图标按钮） */
width: 50px; height: 50px;
border-radius: 50%;
padding: 0;
}禁用状态
css
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}