在网站或应用程序中，有时需要增加一些交互效果来增强用户体验。其中，按钮点击后放烟花是一种非常炫酷的效果。接下来，我们将通过CSS实现这一效果。

css:.button {position: relative;display: inline-block;padding: 12px 30px;background-color: #3498db;color: #fff;text-transform: uppercase;letter-spacing: 1px;border-radius: 50px;overflow: hidden;}.button:hover {cursor: pointer;box-shadow: 0 0 10px #3498db;}.button:after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: radial-gradient(circle, #fff 10%, transparent 10.01%);background-size: 1500px 1500px;width: 0;height: 0;opacity: 1;border-radius: 50%;}.animate {animation: ripple 1s ease-out;}@keyframes ripple {to {width: 500px;height: 500px;opacity: 0;}}

首先，我们创建一个按钮，使用了常见的样式，如背景颜色、字体大小和边框样式等。在按钮的伪元素中创建一个半径为50%的白色圆形，将样式设置为position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);。设置背景为径向渐变，由白色开始占比10%，和透明度10.01%的部分组成。

接下来，在animate类中，定义一个关键帧动画，名称为ripple，时长为1秒，缓动效果为ease-out。将动画属性设置为从50px的宽高增加到500px，并透明度从1减少到0。最后，在按钮上注册一个点击事件，当按钮被点击时，添加一个animate类名，触发动画效果即可。

通过上述步骤，我们就实现了一个CSS按钮点击后放烟花的效果。这不仅可以增加网站或应用程序的视觉效果，还可以吸引用户的注意力，提高用户满意度。