有趣的css - 水波纹按钮

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个好看有质感的水波纹按钮。

最新文章通过公众号「设计师工作日常」发布。

整体效果

💎知识点：
1️⃣ :before 以及 :after 伪元素
2️⃣ animation 动画
3️⃣ transform 以及 transition 属性
4️⃣ :active 选择器

🔑思路：
定义好按钮通用样式，然后利用阴影的大小进行动画参数设置，让阴影动起来，形成水波纹视觉效果。

适用大的入口场景，比如 banner 详情入口等，醒目、容易被看到。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<button class="btn68">button</button>

button 标签主体。

css 部分代码

.btn68{width: 120px;height: 50px;background-color: #0093E9;color: #ffffff;font-size: 16px;font-weight: bold;letter-spacing: 2px;border: none;border-radius: 25px;cursor: pointer;position: relative;display: flex;justify-content: center;align-items: center;transition: all .1s linear;
}
.btn68:before,.btn68:after{content: '';width: 120px;height: 50px;border-radius: 25px;position: absolute;animation: eff68 1.4s linear infinite;
}
.btn68:after{animation-delay: 0.7s;
}
@keyframes eff68{0%{box-shadow: 0 0 0 0px #0093E9;opacity: 0.2;}100%{box-shadow: 0 0 0 30px #0093E9;opacity: 0;}
}
.btn68:active{transform: scale(0.96);
}

1、定义 button 按钮基础样式后，加上 transition 过渡参数 transition: all .1s linear; ，在后面鼠标点击时，有短时间的过渡效果，这里过渡时间不宜设置过长，我设置的 0.1s。

2、通过 :before 以及 :after 创建两个和按钮同样大小的伪元素，再给它们加上 animation 动画属性以及参数 animation: eff68 1.4s linear infinite; ，然后给其中一个伪元素的动画加上延迟播放 animation-delay: 0.7s; ，让两个伪元素形成交叉播放。

3、给动画加上关键帧，让伪元素的阴影逐渐变大，这里设置的 box-shadow 阴影值从 0 并且逐渐扩大到 30px ；然后阴影在变大的过程中逐渐消失，这里通过 opacity 透明值 0.2 到 0 来实现。

4、上面三步就实现了水波纹的视觉效果了，最后再利用 :active 选择器，当鼠标点击按钮时，把按钮进行缩小一点 transform: scale(0.96); ，增强按钮点击时的视觉效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>水波纹按钮</title></head><body><div class="app"><button class="btn68">button</button></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.btn68{width: 120px;height: 50px;background-color: #0093E9;color: #ffffff;font-size: 16px;font-weight: bold;letter-spacing: 2px;border: none;border-radius: 25px;cursor: pointer;position: relative;display: flex;justify-content: center;align-items: center;transition: all .1s linear;
}
.btn68:before,.btn68:after{content: '';width: 120px;height: 50px;border-radius: 25px;position: absolute;animation: eff68 1.4s linear infinite;
}
.btn68:after{animation-delay: 0.7s;
}
@keyframes eff68{0%{box-shadow: 0 0 0 0px #0093E9;opacity: 0.2;}100%{box-shadow: 0 0 0 30px #0093E9;opacity: 0;}
}
.btn68:active{transform: scale(0.96);
}