使用CSS Grid布局与linear-gradient背景可创建美观且响应式的按钮组。1. 通过display: grid定义容器，设置grid-template-columns均分列，gap控制间距；2. 应用background: linear-gradient(135deg, #6a11cb, #2575fc)实现对角渐变，提升视觉层次；3. 添加:hover状态改变渐变方向并配合transform和box-shadow增强交互反馈；4. 利用媒体查询在小屏下改为单列布局，确保适配性。结构清晰、样式现代，适用于登录页或操作面板。
使用CSS的grid布局结合linear-gradient背景，可以创建出视觉层次丰富且结构清晰的按钮组。这种方案既提升了界面美观度，又保持了良好的响应式能力。
Grid布局基础设置
通过display: grid将容器定义为网格结构，合理划分行与列，控制按钮排列。
关键点：
- 设定
grid-template-columns均分或多列自适应 - 使用
gap控制按钮间距 - 对齐方式可配合
justify-items或align-items
.btn-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 400px;
margin: 0 auto;
}
Linear-gradient实现渐变背景
为按钮添加background: linear-gradient()，让色彩自然过渡，增强点击感和现代感。
立即学习“前端免费学习笔记（深入）”；
常见用法：
- 左右渐变：
to right, #6a11cb, #2575fc - 上下高光：
to top, #ff9a9e, #fecfef - 对角线动感：
135deg, #f093fb, #f5576c
.gradient-btn {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border: none;
padding: 14px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
悬停效果与渐变动画
加入transition和:hover状态，使渐变在交互时动态变化，提升用户体验。
技巧：
- 改变渐变方向或颜色位置
- 配合
background-position做流动效果 - 避免过度动画影响性能
.gradient-btn:hover {
background: linear-gradient(45deg, #2575fc, #6a11cb);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 117, 252, 0.3);
}
.gradient-btn {
transition: all 0.3s ease;
}
响应式适配与多设备兼容
在小屏幕上调整网格列数，确保按钮不会挤压。
例如：
- 移动端改为单列堆叠
- 字体和内边距适度缩小
- 保留渐变但降低复杂度以保障渲染效率
@media (max-width: 480px) {
.btn-group {
grid-template-columns: 1fr;
}
}
基本上就这些。Grid提供结构，linear-gradient赋予美感，两者结合简洁高效，适合登录页、操作面板或引导按钮组设计。不复杂但容易忽略细节，比如渐变方向一致性与按钮对齐方式。
