纯HTML&CSS实现点击位置触发波纹按钮：波纹起始位置异常问题求助

你的代码通过径向渐变的背景大小变化实现了波纹效果，但因为background-position固定为center，所以波纹只能从按钮中心扩散，无法跟随点击位置。

需要明确的是：纯CSS无法直接获取鼠标点击的坐标，因此无法完美实现波纹从精确点击位置触发的效果。不过可以通过以下两种思路调整：

1. 优化现有中心波纹效果（保持纯CSS） #

如果你可以接受从中心出发的波纹，只需修复当前代码的一些问题：

• 修正类名拼写错误：secoundary改为secondary
• 调整.ripple的定位，避免覆盖按钮内容

修改后的代码：

HTML #

<button class="ripple">Button</button>

CSS #

:root {
  --btn-primary-color: #ff3434;
  --btn-secondary-color: #b61601;
}

button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--btn-primary-color);
  box-shadow: 0 2px 4px #bbb;
  outline: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ripple {
  position: relative;
  background-position: center;
  transition: background .6s;
}

.ripple:hover {
  background-color: var(--btn-secondary-color);
  background-image: radial-gradient(circle, transparent 1%, var(--btn-primary-color) 1%);
  background-position: center;
  background-size: 15000%;
}

.ripple:active {
  transition: background 0s;
  background-color: var(--btn-secondary-color);
  background-size: 100%;
}

2. 近似点击位置的波纹模拟（纯CSS） #

如果想要视觉上更接近点击位置触发的效果，可以用伪元素结合transform实现，虽然无法精确对应点击坐标，但会有从点击区域附近扩散的视觉感受：

HTML #

<button class="ripple-btn">Button</button>

CSS #

:root {
  --btn-primary-color: #ff3434;
  --btn-secondary-color: #b61601;
}

.ripple-btn {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--btn-primary-color);
  box-shadow: 0 2px 4px #bbb;
  outline: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ripple-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple-btn:active::after {
  width: 300px;
  height: 300px;
}

这个方案中，伪元素从按钮中心快速扩散，视觉上会有类似从点击位置触发的错觉。

如果一定要实现精确从点击位置触发的波纹效果，必须借助JavaScript来获取鼠标点击坐标，动态设置波纹元素的位置，这是纯CSS无法做到的。

内容的提问来源于stack exchange，提问作者Shakil Mahmud