纹波效果纯css透明

Question

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

除了我想使用透明白色作为背景色以便能够在不同背景上使用按钮。 我唯一的问题是，涟漪效应似乎总是错误的方式：而不是一个较轻的圆圈扩大，点击时背景变亮，扩大的圆圈是较暗的颜色。

我的编码如下所示：

 .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>

我怎样才能使效果完全相反？ 单击时，较浅的白色应从中间开始并向外扩展。

Answer 1

您可以在.button:hover规则的背景的radial-gradient中反转 colors ：

 .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, rgba(255, 255, 255, 0.15) 1%, transparent 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>