制作类似于Google的按钮动画（涟漪效果）

Question

我在一个网站上发现了一个按钮，它的动画效果与Google按钮相似。

如何制作这样的按钮，使得无论在哪里点击它都会有动画效果？

以下是我迄今为止完成的代码：

button {
  text-transform: uppercase;
  padding: 0.8em;
  width: 100px;
  background: #0053d9;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: all 0.2s;
  font-size: 15px;
  font-weight: 500;
}

button:hover {
  filter: brightness(80%);
  cursor: pointer;
}

button:active {
  transform: scale(0.92)
}

<button>Login</button>

- user16262715

---

你需要使用JS和CSS来制作“涟漪”效果，并使其出现在鼠标所在的位置。但是，如果你想让涟漪效果从按钮中心位置开始，那么只使用纯CSS也可以实现。这两个选项，你想要哪一个？ - AlphaHowl

正如@AlphaHowl所说，如果你想让涟漪从鼠标所在的位置出现，你需要使用Javascript。你可以参考这个例子来创建一个类似的按钮https://codepen.io/BretCameron/pen/mdPMVaW - PR7

@AlphaHowl 老实说，我更想要 JavaScript 版本，但 CSS 版本也不错。 - user16262715

好的，稍等一下.... - AlphaHowl

@PR7 噢，那也很酷！谢谢！ - user16262715

Answer 1

这种效果被称为材料水波纹效果（或者至少大多数人都这么称呼它）。有两种方法可以实现这种效果 - 一种是使用JS和CSS进行全面效果的操作，这意味着水波纹从鼠标所在位置出现；另一种是仅使用CSS而不使用JS，结果是水波纹从按钮中无论鼠标位于何处都会出现。有些人更喜欢仅使用CSS的版本，因为它更加简洁，但大多数人更喜欢全面版本，因为它考虑了鼠标位置，从而提供了稍微更好的用户体验... 无论如何，我已经创建了这两个效果，请选择您喜欢的那个：）。

PS：以下是任何全面版本的规则：

• 水波纹必须在鼠标按下按钮时创建，而不是在鼠标单击时创建，因为这需要在移动设备上多等待一百毫秒（因为移动浏览器延迟传递单击事件，以便检查它是单击还是双击）。因此，在显示涟漪之前，用户体验会急剧下降，因为您的网站看起来很慢，卡顿，尽管它可能不是。
• 水波纹必须保持在按钮上并覆盖其背景，直到鼠标放开或按钮失去焦点 - 以先到者为准。

没有更多的废话，这是代码...

window.addEventListener("mousedown", e => {
    const target = e.target;

    if(target.nodeName == "BUTTON" && !target.classList.contains("css-only-ripple")) {
      show_ripple(target);
    }
  });
  function show_ripple(button) {
    const style = getComputedStyle(button);
    let ripple_elmnt = document.createElement("span");
    let diameter = Math.max(parseInt(style.height), parseInt(style.width)) * 1.5;
    let radius = diameter / 2;

    ripple_elmnt.className = "ripple";
    ripple_elmnt.style.height = ripple_elmnt.style.width = diameter + "px";
    ripple_elmnt.style.position = "absolute";
    ripple_elmnt.style.borderRadius = "1000px";
    ripple_elmnt.style.pointerEvents = "none";
    
    ripple_elmnt.style.left = event.clientX - button.offsetLeft - radius + "px";
    ripple_elmnt.style.top = event.clientY - button.offsetTop - radius + "px";

    ripple_elmnt.style.transform = "scale(0)";
    ripple_elmnt.style.transition = "transform 500ms ease, opacity 400ms ease";
    ripple_elmnt.style.background = "rgba(255,255,255,0.5)";
    button.appendChild(ripple_elmnt);

    setTimeout(() => {
      ripple_elmnt.style.transform = "scale(1)";
    }, 10);

    button.addEventListener("mouseup", e => {
      ripple_elmnt.style.opacity = 0;
      setTimeout(() => {
        try {
          button.removeChild(ripple_elmnt);
        } catch(er) {}
      }, 400);
    }, {once: true});
    button.addEventListener("blur", e => {
      ripple_elmnt.style.opacity = 0;
      setTimeout(() => {
        try {
          button.removeChild(ripple_elmnt);
        } catch(er) {}
      }, 450);
    }, {once: true});
  }

button {
      text-transform: uppercase;
      padding: 0.8em;
      width: 100px;
      background: #0053d9;
      color: #fff;
      border: none;
      border-radius: 5px;
      transition: all 0.2s;
      font-size: 15px;
      font-weight: 500;
      position: relative;
      overflow: hidden;
    }

    button:hover {
      filter: brightness(80%);
      cursor: pointer;
    }

    button:active {
      transform: scale(0.92)
    }

    .css-only-ripple::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%) scale(0);
      pointer-events: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, .5);
    }

    .css-only-ripple:focus::after {
      animation: scale_up 1000ms forwards;
    }

    @keyframes scale_up {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
      }
    }

<button>Login</button>
<button class="css-only-ripple">Login</button>

<br>
The first button is the CSS and JS version, and the second is the CSS-only version. For the CSS-only button, you have to unfocus it before you click it again or the ripple will not show (it only gets created on focus)

- AlphaHowl

---

很高兴为您效劳 : ) - AlphaHowl