html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮

前言

如果大家有用过Material Design风格的UI库，那么一定对水波纹按钮很熟悉，我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮，先上成品：

原理

在按钮中放置一个默认隐藏径向渐变的元素，点击按钮时，该元素立即出现并由scale(0)过渡到scale(10)的状态，视觉上就像中间的一个点扩散到撑满整个按钮。

代码实现

先实现一个基本的按钮：

<!-- index.html -->

样式：

.

给按钮内部添加水波纹元素（这里使用伪类元素 ::after 来实现），为水波纹元素设置圆形的径向渐变，在鼠标按下时立即出现（opacity: .5）并缩到最小（transform:scale(0)），然后逐渐扩散（transform:scale(10)）并消失（opacity: 0）：

.

自此，我们仅用40行代码实现了一个类似Material Design风格的水波纹按钮。当然，这仅仅是最基础的实现，还是以介绍原理为主，你可以在此基础上实现更丰富的效果，例如可以使用js根据鼠标点击位置来调整水波纹的中心位置等。

以下是完整代码：

Material Design Button​codepen.io