如何在Button上添加过渡效果

Question

我想在按钮上添加过渡效果。当我将鼠标悬停在任何按钮上时，其背景颜色将变为蓝色为白色，文本颜色将从白色变为蓝色。必须从左开始改变背景颜色才能滑动书写。

我尝试了以下代码。

btn {
 transition-property: background-color;
 transition-duration: 0.5s;
}

btn:hover {
 background-color: blue;
 color: white;
}

Answer 1

既然您已经分享了最少的代码，那么这是您正在寻找的东西吗？

在下面，我们使用水平线性渐变（向左），然后将背景大小增加 200%。悬停时，我们尝试移动背景位置，从而创建按钮被另一种颜色填充的效果。请随意更改您喜欢的颜色值。

button {
  padding: 10px 20px;
  border-radius: 4px;
  border: 2px solid black;
  background-color: transparent;
  background: linear-gradient(to left, white 50%, black 50%) right;
  cursor: pointer;
  background-size: 200%;
  transition: 500ms ease-in;
}

button:hover {
  color: white;
  background-position: left;
}

<button>
  Hover Me
</button>