如何制作 CSS 动画，其中悬停按钮文本有额外的位出现并向相反方向移动

Question

如何用CSS制作这样的效果/动画？如果不可能使用纯 CSS，也可以使用 JavaScript/jQuery。

None 到目前为止我的搜索给了我任何合理的提示（也许我只是不知道在这里使用什么正确的术语）。

不必完全相同：即使是部分相似的效果也可以。

需要的动画：

正常状态：红色背景&边框的按钮；白色文字。只有“添加到购物车”文本，居中。

开启hover/focused状态：按钮的背景变为白色；文本颜色变为红色（因此它们颠倒位置），小 > 出现并向右移动；按钮文本向左移动。

文本形式相同：

[   ADD TO CART   ] -- normal state

[ ADD TO CART   > ] -- hovered state

在我的尝试中使用 Bootstrap 5.1 作为基础样式（虽然这里不重要）。

HTML代码：

<button class="btn btn-themed btn-effect text-uppercase"><span class="title">Add to Cart</span> <span class="extra">&gt;</span></button>

基础CSS:

/* === THEMED BUTTONS === */
.btn-themed {
  border: 2px solid #ff1a0a;
  background-color: #ff1a0a;
  color: #fff;
  border-radius: 5px;
  transition: .5s;
}
.btn-themed:hover,
.btn-themed:focus {
  border: 2px solid #ff1a0a;
  background-color: #fff;
  color: #ff1a0a;
}
/* === EFFECT ON BUTTON === */
.btn-effect span.extra {
  display: none;
}
.btn-effect:hover span.extra,
.btn-effect:focus span.extra {
  display: inline;
}

这里我用 > 隐藏了这个位，并且只在悬停时显示它。这是为了使主按钮文本完全居中（当按钮处于“正常”状态时）。悬停时显示该位但是：

跳动（见下图）
最重要的是：我不知道如何定位元素以及应用什么来让它们按需要移动。

我真的很感激一些现有网站上的任何提示/一个工作示例，甚至 link 一些可以在这里使用的 JS 库等等。

Answer 1

不要在显示器上做动画属性。只需在鼠标悬停时在文本上添加 margin-right 即可。就这些

.button:hover .text {
  margin-right: 50px;
}

https://codepen.io/VeterJS/pen/wvdRoKp

Answer 2

这就是你要找的吗？

/* === THEMED BUTTONS === */
.btn-themed {
  border: 2px solid #ff1a0a;
  background-color: #ff1a0a;
  color: #fff;
  border-radius: 5px;
  transition: .5s;
  width: 150px;
  height: 50px;
  transition: 1s;
}
.btn-themed:hover,
.btn-themed:focus {
  border: 2px solid #ff1a0a;
  background-color: #fff;
  color: #ff1a0a;  
}
/* === EFFECT ON BUTTON === */
.btn-themed span.extra {
  visibility: hidden;
  transition: 1s ;
}

.btn-effect:hover span.extra,
.btn-effect:focus span.extra {
  visibility: visible;
  margin-left: 40px;
}

<button class="btn btn-themed btn-effect text-uppercase"><span class="title">Add to Cart</span> <span class="extra">&gt;</span></button>

如何制作 CSS 动画，其中悬停按钮文本有额外的位出现并向相反方向移动

How to make CSS animation where button text on hover has extra bit that appears and moves into opposite direction

html

css

css-animations