Css 按钮按钮样式

您好，我正在学习CSS，想知道如何实现上面的样式。它叫什么样的效果/风格

我以前从未实现过类似的东西，所以我甚至不知道从哪里开始。

单击我！
<button>Click Me!</button>

和Css代码

<style type="text/css">
    @keyframes gradient {
  0% {
    background: radial-gradient(circle at center, rgba( 255, 125 , 125, 0 ) 0%, #fff 0%, #fff 100%);
  }
  25% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.3 ) 24%, #fff 25%, #fff 100%);
  }
  50% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.5 ) 49%, #fff 50%, #fff 100%);
  }
  75% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.8 ) 74%, #fff 75%, #fff 100%);
  }
  100% {
    color: #fff;
    background: radial-gradient(circle at center, #f88 99%, #fff 100%, #fff 100%);
  }
}

body {
  background: #68d;
}
button {
  margin-left: calc( 50vw - 175px );
  margin-top: calc( 50vh - 30px );
  width: 350px;
  height: 60px;
  border: none;
  border-radius: 5px;
  background: #fff;
  font-weight: bold;
  font-size: 1.1em;
  color: #666;
  box-shadow: 0 6px 6px #06f;
  outline: none;
}
button:active {
  /* set time duration to your needs */
  animation: gradient 100ms;
  background: #f88;
  color: #fff;
  box-shadow: none;
}
</style>

@关键帧渐变{
0% {
背景：径向梯度（中心圆，rgba（255，125，125，0）0%，fff 0%，fff 100%）；
}
25% {
背景：径向梯度（中心圆，rgba（255，125，125，0.3）24%，fff 25%，fff 100%）；
}
50% {
背景：径向梯度（中心圆，rgba（255，125，125，0.5）49%，fff 50%，fff 100%）；
}
75% {
背景：径向梯度（中心圆，rgba（255，125，125，0.8）74%，fff 75%，fff 100%）；
}
100% {
颜色：#fff；
背景：径向梯度（中心圆，#f88 99%，#fff 100%，#fff 100%）；
}
}
身体{
背景：#68d；
}
钮扣{
左边距：计算（50vw-175px）；
保证金顶部：计算（50vh-30px）；
宽度：350px；
高度：60px；
边界：无；
边界半径：5px；
背景：#fff；
字体大小：粗体；
字体大小：1.1米；
颜色：#666；
盒影：0 6px 6px#06f；
大纲：无；
}
按钮：激活{
/*根据您的需要设置持续时间*/
动画：渐变100ms；
背景：#f88；
颜色：#fff；
盒影：无；
}

点击我！

和Css代码

<style type="text/css">
    @keyframes gradient {
  0% {
    background: radial-gradient(circle at center, rgba( 255, 125 , 125, 0 ) 0%, #fff 0%, #fff 100%);
  }
  25% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.3 ) 24%, #fff 25%, #fff 100%);
  }
  50% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.5 ) 49%, #fff 50%, #fff 100%);
  }
  75% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.8 ) 74%, #fff 75%, #fff 100%);
  }
  100% {
    color: #fff;
    background: radial-gradient(circle at center, #f88 99%, #fff 100%, #fff 100%);
  }
}

body {
  background: #68d;
}
button {
  margin-left: calc( 50vw - 175px );
  margin-top: calc( 50vh - 30px );
  width: 350px;
  height: 60px;
  border: none;
  border-radius: 5px;
  background: #fff;
  font-weight: bold;
  font-size: 1.1em;
  color: #666;
  box-shadow: 0 6px 6px #06f;
  outline: none;
}
button:active {
  /* set time duration to your needs */
  animation: gradient 100ms;
  background: #f88;
  color: #fff;
  box-shadow: none;
}
</style>

@关键帧渐变{
0% {
背景：径向梯度（中心圆，rgba（255，125，125，0）0%，fff 0%，fff 100%）；
}
25% {
背景：径向梯度（中心圆，rgba（255，125，125，0.3）24%，fff 25%，fff 100%）；
}
50% {
背景：径向梯度（中心圆，rgba（255，125，125，0.5）49%，fff 50%，fff 100%）；
}
75% {
背景：径向梯度（中心圆，rgba（255，125，125，0.8）74%，fff 75%，fff 100%）；
}
100% {
颜色：#fff；
背景：径向梯度（中心圆，#f88 99%，#fff 100%，#fff 100%）；
}
}
身体{
背景：#68d；
}
钮扣{
左边距：计算（50vw-175px）；
保证金顶部：计算（50vh-30px）；
宽度：350px；
高度：60px；
边界：无；
边界半径：5px；
背景：#fff；
字体大小：粗体；
字体大小：1.1米；
颜色：#666；
盒影：0 6px 6px#06f；
大纲：无；
}
按钮：激活{
/*根据您的需要设置持续时间*/
动画：渐变100ms；
背景：#f88；
颜色：#fff；
盒影：无；
}

我实现了一些东西。这与您共享的设计非常相似

。按钮{
位置：相对位置；
填充：20px 25px；
背景#0977d0；
颜色：#fff；
边界：0；
字体大小：14px；
字号：700；
边界半径：5px；
溢出：隐藏；
光标：指针；
}
.按钮：之前{
宽度：20px；
高度：20px；
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：0；
背景：rgba（255，255，255，0.3）；
边界半径：50%；
过渡：所有0.4缓进缓出；
不透明度：0；
}
.按钮跨度{
位置：相对位置；
z指数：1；
}
.按钮：悬停：：之前{
宽度：70px；
高度：70像素；
不透明度：1；
}

---

按下

我实现了一些东西。这与您共享的设计非常相似

。按钮{
位置：相对位置；
填充：20px 25px；
背景#0977d0；
颜色：#fff；
边界：0；
字体大小：14px；
字号：700；
边界半径：5px；
溢出：隐藏；
光标：指针；
}
.按钮：之前{
宽度：20px；
高度：20px；
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：0；
背景：rgba（255，255，255，0.3）；
边界半径：50%；
过渡：所有0.4缓进缓出；
不透明度：0；
}
.按钮跨度{
位置：相对位置；
z指数：1；
}
.按钮：悬停：：之前{
宽度：70px；
高度：70像素；
不透明度：1；
}

---

按下

也可以使用JS和CSS类实现

<div class='button'></div>

JS

.button {
  width: 220px;
  height: 70px;
  background-color:blue;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}

.ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

function buttonClick() {
  var buttons = document.querySelectorAll('.button')
  Array.prototype.forEach.call(buttons, function(button) {
    button.addEventListener('click', createRipple)
  })
}

function createRipple(element) {
  var circle = document.createElement('div')
  this.appendChild(circle)
  var dimensions = Math.max(this.clientWidth, this.clientHeight)
  circle.style.width = circle.style.height = dimensions + 'px'
  circle.style.left = element.clientX - this.offsetLeft - dimensions / 2 + 'px'
  circle.style.top = element.clientY - this.offsetTop - dimensions / 2 + 'px'
  circle.classList.add('ripple')
  circle.addEventListener('animationend', () => {
    circle.remove()
  })
}

---

也可以使用JS和CSS类实现

<div class='button'></div>

JS

.button {
  width: 220px;
  height: 70px;
  background-color:blue;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}

.ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

function buttonClick() {
  var buttons = document.querySelectorAll('.button')
  Array.prototype.forEach.call(buttons, function(button) {
    button.addEventListener('click', createRipple)
  })
}

function createRipple(element) {
  var circle = document.createElement('div')
  this.appendChild(circle)
  var dimensions = Math.max(this.clientWidth, this.clientHeight)
  circle.style.width = circle.style.height = dimensions + 'px'
  circle.style.left = element.clientX - this.offsetLeft - dimensions / 2 + 'px'
  circle.style.top = element.clientY - this.offsetTop - dimensions / 2 + 'px'
  circle.classList.add('ripple')
  circle.addEventListener('animationend', () => {
    circle.remove()
  })
}

---

我想说的是涟漪效应，您可能需要研究css动画属性的变换和转换选项。这是一个很好的开始。我想说的是涟漪效应，你们可能想看看css动画属性的变换和转换选项。这是一个好的开始。我看到你做了一个更可爱的演示。。。在一个片段中查看它会很好有什么解释吗？我看到你做了一个更可爱的演示。。。在一个片段中查看它会很好对它的工作原理有什么解释吗？