如何用CSS制作多种样式的按钮并附上样式代码

在前端页面开发中，按钮是承载用户操作的核心交互组件，不同的业务场景需要搭配不同视觉风格的按钮。通过CSS可以灵活实现各类按钮效果，无需依赖额外的图片资源，还能保证样式可维护性。

基础纯色按钮

最基础的按钮样式只需要设置背景色、文字颜色、内边距和边框即可，适合通用场景使用。

/* 基础按钮样式 */
.base-btn {
    padding: 8px 16px;
    background-color: #409eff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    /* 添加过渡效果让交互更平滑 */
    transition: background-color 0.3s ease;
}
.base-btn:hover {
    background-color: #66b1ff;
}

对应的HTML结构如下，使用<button>标签或者<a>标签都可以应用该样式：

<button class="base-btn">基础按钮</button>
<a href="javascript:;" class="base-btn">链接按钮</a>

渐变背景按钮

渐变按钮可以提升视觉层次感，通过linear-gradient属性实现背景渐变效果。

/* 渐变按钮样式 */
.gradient-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

带边框的空心按钮

空心按钮常用于次要操作场景，通过透明背景和边框实现，悬停时填充背景色。

/* 空心按钮样式 */
.outline-btn {
    padding: 8px 16px;
    background-color: transparent;
    color: #409eff;
    border: 1px solid #409eff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.outline-btn:hover {
    background-color: #409eff;
    color: #ffffff;
}

带图标的按钮

可以在按钮内添加图标提升辨识度，这里用伪元素实现简单图标，也可以引入图标字体。

/* 带图标的按钮样式 */
.icon-btn {
    padding: 8px 16px 8px 36px;
    background-color: #67c23a;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
}
.icon-btn:hover {
    background-color: #85ce61;
}
/* 用伪元素实现左侧对号图标 */
.icon-btn::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

禁用状态按钮

按钮在不可操作时需要展示禁用状态，通过disabled属性和对应样式实现。

/* 禁用按钮样式 */
.disabled-btn {
    padding: 8px 16px;
    background-color: #c0c4cc;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: not-allowed;
    opacity: 0.6;
}
/* 按钮添加disabled属性时自动应用禁用样式 */
button[disabled] {
    background-color: #c0c4cc;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}

以上几种按钮样式覆盖了大部分常见场景，开发者可以根据实际需求调整颜色、尺寸、圆角等参数，也可以组合不同的属性实现更个性化的按钮效果。

CSS按钮样式前端开发HTML修改时间：2026-06-04 07:09:47