[分享]css3按钮点击变色

按钮是网页上常出现的交互元素之一，而按钮的样式也是非常关键的。今天，我们就来学习一下如何利用CSS3技术实现按钮点击变色的效果。 / 定义普通按钮的样式 / button { backgroundco...

按钮是网页上常出现的交互元素之一，而按钮的样式也是非常关键的。今天，我们就来学习一下如何利用CSS3技术实现按钮点击变色的效果。

/* 定义普通按钮的样式 */
button {
  background-color: #3498db;
  color: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

/* 定义按钮点击的样式 */
button:hover, button:focus {
  background-color: #2980b9;
}

/* 定义按钮按下的样式 */
button:active {
  background-color: #1f618d;
} 

在上面的代码中，我们首先定义了普通按钮的样式，包括背景颜色、字体颜色、边框、圆角、内边距、字体大小和鼠标样式等。接着，我们使用:hover和:focus伪类选择器来定义按钮鼠标悬停和聚焦时的样式，即背景颜色变为浅蓝色。最后，我们使用:active伪类选择器来定义按钮被按下时的样式，即背景颜色变为深蓝色。

通过上述代码的实现，我们可以轻松地实现按钮点击变色的效果。当用户鼠标悬停在按钮上时，按钮会从普通样式变为浅蓝色，提醒用户该按钮可以进行点击操作。当用户点击按钮时，按钮又会从浅蓝色变为深蓝色，提示用户该按钮已被按下。