纹波效果纯CSS透明

我正在尝试创建一个像这样的纯CSS波纹效果: https://codepen.io/finnhvman/pen/jLXKJw

I'm trying to create a pure CSS ripple effekt like this one: https://codepen.io/finnhvman/pen/jLXKJw

除了我想使用透明的白色作为背景色，以便能够在不同背景上使用按钮.我唯一的问题是，波纹效应似乎总是错误的处理方式:单击时背景变为浅色，而不是较浅的圆圈扩展，而扩展的圆圈为较暗的颜色.

Except that I want to use transparent white as background color to be able to use the button on different backgrounds. My only problem is, that the ripple effect always seems to be the wrong way around: instead of a lighter circle expanding, the background becomes light on click and the circle which expands is the darker color.

我的编码如下:

.background{
width: 150px;
display: inline-block;
height: 50px;
background: #0066dd;
padding: 20px;
}

.color2{
background: #6600cc;
}

.button{
    font-size: 24px;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    transition: all 0.8s ease;
    background-position: center;
}

.button:hover{
  background: rgba(255, 255, 255, 0.15) radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.15) 1%) center/15000%;
}
    
.button:active{
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 100%;
  transition: background 0s;
}

<div class="background">
<span class="button">Button 1</span>
</div>
<div class="background color2">
<span class="button">Button 2</span>
</div>

如何使效果完全相反?单击时，较浅的白色应从中间开始并扩展到外部.

How can I make the effect the exact opposite way? On-Click the lighter white should start in the middle and expand to the outer.