CSS按钮点击波浪效果是在按钮被点击时在按钮的周围产生波浪效果的一种CSS效果。这种效果通常被用于按钮的活动状态的视觉展示，以增加用户的互动性和吸引力。

.btn {position: relative;overflow: hidden;border: none;outline: none;background: transparent; }.btn:hover:after {transform: scale(2);opacity: 0; }.btn:active:after {transform: scale(0);opacity: .2; }.btn:after {content: '';position: absolute;left: 50%;top: 50%;transform: scale(0);border-radius: 50%;background-color: white;opacity: .5;width: 100%;height: 100%;margin-left: -50%;margin-top: -50%;z-index: -1;transition: transform .3s ease-out, opacity .5s ease-in-out; }

上面的代码就是实现这种效果的关键。其中，主要包括以下几个元素：

• btn类：需要应用波浪效果的按钮的CSS样式类
• after伪类：使用CSS3中的伪类创建的装饰性物体，它是按钮上的一个圆形图案，用来生成波浪效果
• transform属性：用来改变按钮或者伪类的CSS属性，通过设置translate,scale,rotate等来实现
• transition属性：用来实现平滑的过渡动画效果

以上代码中，“.btn:after”选择器表示被点击后的过渡效果；“btn:hover:after”选择器表示鼠标在按钮上时的过渡效果；而“btn:active:after”选择器表示按钮被按下时的过渡效果。

在实际运用中，我们可以灵活运用这些选择器来实现不同样式和场景下的按钮波浪效果。通过不断调整CSS属性和伪类属性，以达到视觉效果和用户体验的最佳平衡点。