Javascript 什么CSS（或JS？）动画有这个按钮？

事实上，我在他们之前遇到过这个主题：

我想知道如何实现动画效果滑块中的两个按钮有“立即购买”和“开始旅程”按钮。我已经用Firebug检查了它背后的代码，但在理解所有内容时有点困难，所以我尝试在谷歌上搜索动画，发现了Hover.css。这并不是我想要的，所以我想知道是否有人能解释实现这种效果的方法

---

提前谢谢

它在CSS中完成了所有工作，您需要检查它的HTML和CSS，以了解该用户使用了哪些CSS属性

我注意到的事情很少，我将与你分享

元素结构 它有锚定标签，里面有跨度，锚定标签有两个伪元素，在前后，所以你们可以说它看起来像这样 [o==o]所以这里的“o”表示伪元素：before和：after，“==”是span元素 他为这些元素设置了一些CSS，比如锚元素上的背景色，在伪元素之前和之后隐藏，在伪元素之前向左放置20个像素，在伪元素之后向右放置20个像素，并通过将其设置为透明来隐藏这些伪元素 现在他已经在所有这3个元素的悬停上写了更多的CSS，比如用转换、动画、webkit转换CSS在视图中显示它们。 在hover上，他使用各种CSS属性，从左到右到中心，在伪元素前后设置动画。。。。他也改变了元素的背景色。 因此，如果您一步一步地完成这些工作，并且能够正确地完成每个CSS转换和动画，那么您也能够完成这些动画

---

我能够提取一些CSS属性，并试图使其成为虚拟的，但我不能成功超过这个。。。但是你可以尝试一下，得到你想要的，这里是一个

看看下面的代码。你可以调整它以获得你想要的效果

HTML:

---

你可以找到小提琴

哪些按钮，命名它们……只要检查代码，一切都在那里。告诉我们你尝试了什么？同时，也要发布你的尝试。未能理解问题。@ParagBhayani他可能在谈论“立即购买”和“开始旅程”按钮。他们的动画技术确实很有趣。没想到有人会用：之前和；那样的话。

<section id="button-container" class="section">
  <div id="effect" class="button">
    <span class="text">Button</span>
  </div>
</section>

body, html {
  height: 100%;
  width: 100%;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.section {
  float: left;
  font-family: 'Helvetica', sans-serif;
  height: 50%;
  width: 50%;
  display: flex;
  -webkit-display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.button {
  border: none;
  cursor: pointer;
  padding: 25px 50px;
  border: solid 1px gray;
  border-radius: 8px;
  position: relative;
}
.button .text {
  position: relative;
  z-index: 100;
  font-size: 2em;
}

#button-container {
  background-color: #fff;
}
#button-container #effect {
  background-color: #42b574;
  overflow: hidden;
}
#button-container #effect .text {
  color: #fff;
  transition: all .5s linear;
  -webkit-transition: all .5s linear;
}
#button-container #effect::after {
  content: '';
  position: absolute;
  transition: top .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
  -webkit-transition: top .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
  left: 50%;
  top: -50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #79ccf2;
}
#button-container #effect:hover .text {
  color: #ffffff;
  transition: color .5s linear .5s;
  -webkit-transition: color .5s linear .5s;
}
#button-container #effect:hover::after {
  transition: top .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
  -webkit-transition: top .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
  top: 50%;
  width: 400px;
  height: 400px;
}