让你的按钮心动起来

背景

不知道大家日常学英语不，英语对未来的直接上限的提升其实有巨大的作用。有一款语言学习软件可能大家都听过------多邻国，是目前日活和评价最高的外语学习软件之一。它的设计非常简约个性，特别是所有的按钮都有一个"心动"的交互效果，很有意思，嗯，我们的产品也觉得不错。所以怎么实现的问题就到了我这里，真是幸运，咱也是喜欢挑战的，于是花了半天整了个函数实现了通用的效果，提供给小伙伴开发使用。这里放个视频先展示一下效果。

不太会截图，大家凑活看:)

分析

首先这个效果是按钮的按住效果，我们可以使用:active伪类来实现
按钮被按下的时候阴影消失了，而且是整个按钮下降了阴影的高度
整个过程有一个简单的过渡动效

简单翻译为css代码

假定我们有一个宽 692px 高96px的按钮，阴影为10px，主体按钮的背景为#57cc02，阴影的颜色为#47a302那么我们按钮的初始状态为：

相应的代码：

css 复制代码

 .btn-play {
      display: flex;
      width: 6.92rem;
      height: 0.96rem;
      align-items: center;
      justify-content: center;
      font-size: 0.32rem;
      color: #fff;
      font-weight: bold;
      background: #57cc02;
      border-radius: 0.24rem;
      box-shadow: 0 .1rem 0 0 #47a302;
    }

让我们的按下时阴影消失且高度下降，我们需要添加如下样式：

css 复制代码

 .btn-play:active {
     box-shadow: 0 0 0 transparent;
     transform: translateY(.1rem);
 }

可以看到，当按钮被按下的时刻，按钮的阴影变为了透明，高度从y轴向下减少了10px，但是这个动作是瞬时变化的，并没有过渡效果。那么我们再加一行代码：

css 复制代码

     transition: all 0.1s ease-in-out;

这时，我们的按钮就有了心跳的感觉了，css真的能化腐朽为神奇～

进阶

我们在多邻国中学习的时候，发现几乎所有的按钮都有这个效果，各种颜色各种形状的，那么我们自己也需要设计多种形状多种颜色的有这种效果的按钮，难道每次都要cv一段这个代码，并且修改颜色高度吗。感觉会有点小累，但也不是不可接受。不过作为高贵的牛马，咱也要学会为我们的代码施加一点小魔法------抽象方法。好在各个css预编译器都为我们提供了封装css方法的功能。这里仅介绍一下less的方法封装。

我们定义一个.heart-btn方法
很明显我们只需要设计阴影的颜色与高度即可，假定我们只需要纯色阴影，所以我们传入这两个参数@color和@shadowheight 代码如下：

less 复制代码

  .heart-btn(@color,@shadowheight) {
    box-shadow: 0 @shadowheight 0 0 @color;
    transition: all 0.1s ease-in-out;
    &:active {
      box-shadow: 0 0 0 transparent;
      transform: translateY(@shadowheight);
    }
  }

那么我们的按钮样式现在就可以变为：

less 复制代码

 .btn-play {
  display: flex;
  width: 6.92rem;
  height: 0.96rem;
  align-items: center;
  justify-content: center;
  font-size: 0.32rem;
  color: #fff;
  font-weight: bold;
  background: #57cc02;
  border-radius: 0.24rem;
  .heart-btn(#47a302, 0.1rem);
}

仅仅多了一行函数调用，贴一下代码效果：

总结

本文提供了一种按钮的按下效果实现的方法，同时引入了less函数的封装与使用，希望能为遇到这个场景的小伙伴提供一些思路。本文涉及的less函数的概念没做详细阐述，大家可以自行百度，哦不，自行掘金～