一款css实现的鼠标经过按钮的特效

要实现一个鼠标经过按钮的特效，我们可以使用 CSS 来完成，下面是具体的步骤：

要实现一个鼠标经过按钮的特效，我们可以使用 CSS 来完成，下面是具体的步骤：

步骤一：HTML结构的编写

首先，我们需要在 HTML 中编写出一个简单的按钮：

<button>提交</button>

步骤二：CSS 样式的编写

接下来，我们需要在 CSS 中为按钮添加样式，为了达到特效，我们需要使用到 :hover 选择器。

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: white;
  color: #4CAF50;
}

在以上代码中，我们为按钮设置了默认样式和鼠标经过样式（:hover）。注意，我们为 transition-duration 设置了 0.4 秒的过渡时间，这是使特效效果更加流畅的关键。

示例一：

<button>保存草稿</button>

button {
  background-color: #3E5FCE;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: white;
  color: #3E5FCE;
}

示例二：

<button>立即购买</button>

button {
  background-color: #FF5722;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: white;
  color: #FF5722;
}

以上就是两个示例。你可以根据自己的需求来设置按钮的背景色、字体颜色等等。同时，为了使网站更加美观，我们还可以使用渐变效果、阴影等其他特效来进一步优化按钮的样式。