css3 鼠标滑过按钮

CSS(层叠样式表) 是一种用于描述和格式化Web文档的语言。 CSS3是一种新的升级版，它引入了很多新的属性和功能，其中包括了鼠标滑过按钮的特效。通过使用CSS3来添加鼠标滑过按钮，可以增加网站的交互性，并提高用户的体验。在本文中，我们将介绍如何使用CSS3来添加鼠标滑过按钮。

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #000;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #000;
  color: #fff;
}

以上是一个简单的CSS代码片段，可以用来创建一个鼠标滑过按钮。首先，我们定义一个.button类，它是一个行内块元素，并设置了一些基本的样式，如内边距、边框、背景色和颜色等。我们还定义了一个过渡属性，它表示当按钮发生变化时，变化应该是缓慢的，并持续0.3秒。

然后，我们使用:hover伪类来指定当用户把鼠标移到按钮上时应该发生的样式变化。我们将背景色改为黑色，字体颜色改为白色。由于我们在.button类中定义了一个过渡属性，这些变化将以流畅的方式发生。

通过这种方式，我们可以轻松地为网站添加一些非常炫酷的交互特效。我们可以改变按钮的颜色、大小或透明度，或者使用其他CSS属性来定义自己的特效。