[分享]css取消按钮的突出效果

CSS取消按钮的突出效果，是让按钮的背景颜色在鼠标悬停到按钮上时消失的一种效果。这种效果通常应用于表单中的“取消”按钮或者“清空”按钮等需要进行一些撤销操作的按钮上。要实现这种效果，我们可以使用CSS...

CSS取消按钮的突出效果，是让按钮的背景颜色在鼠标悬停到按钮上时消失的一种效果。这种效果通常应用于表单中的“取消”按钮或者“清空”按钮等需要进行一些撤销操作的按钮上。

要实现这种效果，我们可以使用CSS中的:hover伪类来达到，具体的代码如下：

button.cancel {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

button.cancel:hover {
  background-color: transparent;
} 

上面的代码中，我们首先定义了一个样式名为“cancel”的按钮样式，包括了按钮的背景颜色、边框、内边距、边框圆角和鼠标样式等。然后，我们使用:hover伪类来重新定义了按钮在悬停状态下的样式，把按钮的背景颜色设为transparent，这样就能实现我们想要的效果。

需要注意的是，这种效果只在现代浏览器上支持，如果想要兼容旧版浏览器，需要使用JavaScript来实现，不过现在基本上可以忽略不计了。