纯 CSS 活动按钮介绍

在前端开发中，我们经常会用到按钮来触发某些页面操作。而针对不同状态的按钮，我们可以通过应用不同的样式来做出区分。本文将介绍如何纯 CSS 实现活动按钮。

活动按钮的样式

活动按钮的样式一般有以下几种：

• 普通样式：按钮处于默认状态时的样式。

• 悬浮样式：用户鼠标悬停在按钮上时的样式。

• 点击样式：用户点击按钮时的样式。

• 禁用样式：在某些情况下需要将按钮置为禁用状态，此时按钮样式应该有所变化。

下面是一个样式简单的活动按钮实现示例：

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0062cc;
}

.btn:active {
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5);
}

.btn:disabled {
  cursor: not-allowed;
  background-color: #e6e6e6;
  color: #828282 !important;
}

这个 CSS 规则定义了一个基础样式，及其对应的悬浮、点击和禁用的变化样式。

在 HTML 中应用活动按钮样式

在 HTML 中应用活动按钮样式非常简单，只需要为按钮元素添加 class="btn" 属性即可。同时，还可以根据需要添加 disabled 属性，将按钮设为禁用状态。

<!-- 活动按钮 -->
<button class="btn">活动按钮</button>

<!-- 禁用状态按钮 -->
<button class="btn" disabled>禁用状态按钮</button>

以上示例会在页面中生成两个按钮，其中一个是基础样式的活动按钮，另一个则是带有禁用状态变化的活动按钮。

代码片段

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0062cc;
}

.btn:active {
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5);
}

.btn:disabled {
  cursor: not-allowed;
  background-color: #e6e6e6;
  color: #828282 !important;
}

<!-- 活动按钮 -->
<button class="btn">活动按钮</button>

<!-- 禁用状态按钮 -->
<button class="btn" disabled>禁用状态按钮</button>

以上是完整的代码示例，可以直接在 HTML 页面中应用。