网页设计按钮样式

1. 基础按钮样式

css

btn {

padding: 12px 24px;

border: none;

border-radius: 8px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

/ 主色调按钮 /

primary-btn {

background: 2196F3;

color: white;

/ 描边按钮 /

outline-btn {

background: transparent;

border: 2px solid 2196F3;

color: 2196F3;

2. 悬停效果

css

/ 渐变动画 /

hover-gradient:hover {

background: linear-gradient(45deg, 2196F3, 21CBF3);

/ 阴影悬浮 /

shadow-hover:hover {

box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);

transform: translateY(-2px);

/ 填充动画 /

fill-animation {

position: relative;

overflow: hidden;

fill-animation::after {

content: '';

position: absolute;

left: -100%;

top: 0;

width: 100%;

height: 100%;

background: rgba(255,255,255,0.2);

transition: all 0.4s ease;

fill-animation:hover::after {

left: 0;

3. 现代设计趋势

玻璃拟态效果：

css

glass-btn {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

3D 按钮：

css

btn-3d {

position: relative;

box-shadow: 0 4px 0 1565C0;

transition: all 0.1s ease;

btn-3d:active {

transform: translateY(4px);

box-shadow: none;

4. 图标按钮

html

Download

5. 响应式设计技巧

css

/ 移动端优化 /

@media (max-width: 768px) {

btn {

padding: 10px 20px;

font-size: 14px;

/ 全宽度按钮 /

full-width-btn {

width: 100%;

display: block;

最佳实践建议：

1. 对比度控制：文字与背景的对比度至少保持 4.5:1

2. 尺寸规范：最小点击区域 44×44px（符合WCAG标准）

3. 动效时长：保持动画在 200-500ms 之间

4. 状态反馈：包含正常、悬停、点击、禁用四种状态

5. 层级关系：通过颜色深浅和阴影大小表现按钮优先级

可以通过CSS变量实现主题化：

css

root {

primary-color: 2196F3;

btn-radius: 8px;

btn-padding: 12px 24px;

btn {

padding: var(btn-padding);

border-radius: var(btn-radius);

background: var(primary-color);