有趣的css - 水波纹按钮

news2024/9/25 15:25:29

大家好，我是 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);
}