CSS3 按钮

CSS3 按钮

在本章节中，我们将详细介绍如何使用 CSS 来创建各种样式美观、交互性强的网页按钮。下面是默认的按钮样式：

---

CSS3 基本按钮样式

以下是简洁实用的基础按钮 CSS 样式表，简约设计，交互反馈清晰。

.btn {
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

实现的效果：

基本按钮样式

---

CSS3 按钮颜色

以下是涵盖蓝、绿、红、橙、灰、黑等多色的精美按钮 CSS 样式表。

/* 蓝色按钮 */
.btn-primary {
    background: linear-gradient(to bottom, #2196F3, #0b7dda);
}

/* 绿色按钮 */
.btn-success {
    background: linear-gradient(to bottom, #4CAF50, #45a049);
}

/* 红色按钮 */
.btn-danger {
    background: linear-gradient(to bottom, #f44336, #d32f2f);
}

/* 橙色按钮 */
.btn-warning {
    background: linear-gradient(to bottom, #FFC107, #FFA000);
}

/* 灰色按钮 */
.btn-gray {
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
}

/* 黑色按钮 */
.btn-black {
    background: linear-gradient(to bottom, #9E9E9E, #757575);
}

实现的效果：

蓝色按钮 绿色按钮 红色按钮 橙色按钮 灰色按钮 黑色按钮

---

CSS3 按钮大小

以下是涵盖超小、小、标准、大四种尺寸的完整按钮样式表。

.btn-xs {
    padding: 6px 8px;
    font-size: 12px;
}

.btn-sm {
    padding: 8px 10px;
    font-size: 14px;
}

.btn-normal {
    padding: 10px 20px;
    font-size: 16px;
}

.btn-lg {
    padding: 8px 16px;
    font-size: 18px;
}

实现的效果：

超小按钮 小按钮 中按钮 大按钮

---

CSS3 按钮圆角

以下是包含无圆角至 50% 圆角等六种不同弧度的按钮样式表。

.btn-radius-0 {border-radius:0;}
.btn-radius-2 {border-radius:2px;}
.btn-radius-4 {border-radius:4px;}
.btn-radius-8 {border-radius:8px;}
.btn-radius-22 {border-radius:22px;}
.btn-radius-50 {border-radius:50%;}

实现的效果：

无圆角按钮 2像素按钮 4像素按钮 8像素按钮 22像素按钮 50%按钮

---

CSS3 按钮边框

以下是涵盖蓝、绿、红、橙、灰、黑六种边框色的按钮样式表。

/* 蓝色按钮 */
.btn-border-primary {
    border:solid 1px #2196F3;
    color: #2196F3;
}

/* 绿色按钮 */
.btn-border-success {
    border:solid 1px #4CAF50;
    color:#4CAF50;
}

/* 红色按钮 */
.btn-border-danger {
    border:solid 1px #f44336;
    color:#f44336;
}

/* 橙色按钮 */
.btn-border-warning {
    border:solid 1px #FFC107;
    color:#FFC107;
}

/* 灰色按钮 */
.btn-border-gray {
    border:solid 1px #9E9E9E;
    color:#9E9E9E;
}

/* 黑色按钮 */
.btn-border-black {
    border:solid 1px #333;
    color:#333;
                        }

实现的效果：

蓝色按钮 绿色按钮 红色按钮 橙色按钮 灰色按钮 黑色按钮

---

CSS3 按钮阴影

以下展示的是带阴影效果与无阴影效果的按钮，以便清晰对比。

/* 阴影按钮 */
.btn-box-shadow {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

实现的效果：

阴影按钮 大一点的阴影按钮 鼠标悬停/点击后显示阴影

---

CSS3 按钮宽度

以下是包含 250 像素固定宽度、50% 及 100% 占比宽度的按钮样式表。

.btn-width-250 {
    width: 250px;
}

.btn-width-50 {
    width: 50%;
}

.btn-width-100 {
    width: 100%;
}

实现的效果：

250像素宽度按钮 50%宽度按钮 100%宽度按钮

---

CSS3 自定义按钮

以下是涵盖自定义、禁用、波纹等多种特色效果的创意按钮样式集合。

/* 自定义按钮 */
.btn-custom {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, #4CAF50, #45a049);
}

/* 禁用状态按钮 */
.button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

实现的效果：

自定义按钮 禁用状态 点击波纹 3D按钮 渐变背景 边框动画 → 悬停动画

---

更多实例

微交互智能按钮（多状态反馈）

本例演示了订单提交时，提交进度以及提交结果反馈的动态按钮。

点击触发粒子爆炸按钮（点击特效）

本例演示了点击按钮时，按钮产生粒子爆炸效果的动态按钮。

全息投影按钮（赛博朋克风）

本例演示了一个全息投影的蓝色动态按钮，悬停时带边框投影效果。

磁吸跟随按钮（科幻感交互）

本例演示了一个3D效果、渐变背景的按钮，悬停位置背景高亮、按钮倾斜效果。

现代风格动态交互按钮

本例演示了渐变悬停上浮按钮、横向展开亮光按钮、3D旋转按钮、点击抖动按钮、点击闪光按钮。

---

---

---