删除按钮
此交互效果适用于删除逻辑，将删除的含义表述的很真实，点击删除按钮时，动画效果步骤如下：
- 点击按钮左侧图标平移居中显示并改变图标形式，按钮文案淡出隐藏
- 从上往下出现蓝色纸张经过碎纸机图标时变化为蓝色条形，形象化碎纸机的功能
- 蓝色条形移出图标时下方出现打勾蓝色图标，代表执行完成
此处代码纯CSS实现，没有使用其他动画库，点击按钮添加一个class类，在CSS通过不同的class实现动画效果。以下代码简单列举其中几个属性的变化：
.delete-button { span { opacity: var(--span-opacity, 1); transform: translateX(var(--span-x, 0)) translateZ(0); transition: transform .4s ease var(--span-delay, .2s), opacity .3s ease var(--span-delay, .2s); } .trash { transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, .64)); } // 点击后 &.delete { // 文案隐藏 --span-opacity: 0; --span-x: 16px; --span-delay: 0s; // 图标居中显示 --trash-x: 46px; --trash-y: 2px; --trash-scale: 1; --trash-lines-opacity: 0; --trash-line-scale: 0; }
点赞按钮
此交互效果适用于用户点赞的场景，主要亮点是其中的大拇指的动作，完美的诠释了真实场景中点赞的动作，整个动画步骤可拆解如下：
- 鼠标悬停时手掌往下，大拇指按下
- 点击按钮时，大拇指弹出，整个图标有细微向上的动画
- 点击完成时，按钮变色，文案变更
此处实现使用点击添加class结合gsap实现，首先来看细微的大拇指动画。整个大拇指是由一个元素和一个伪元素实现，hover样式到点击后样式改变其旋转的角度即可。
// 未点击hover时 &:not(.liked) { &:hover { --hand-rotate: 8; --hand-thumb-1: -12deg; --hand-thumb-2: 36deg; } } // 默认 .thumb { transform: scale(.85) translateY(-.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0); &:before { transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0); } }
这里的--hand-rotate是整个手掌的动画控制，使用gsap的调用方式。
gsap.fromTo(button, { '--hand-rotate': 8 }, { ease: 'none', keyframes: [{ '--hand-rotate': -45, duration: .16, ease: 'none' }, { '--hand-rotate': 15, duration: .12, ease: 'none' }, { '--hand-rotate': 0, duration: .2, ease: 'none', clearProps: true }] });
提交按钮
此交互逻辑适用商城提交订单后的效果，提交按钮后会出现包裹装车运走的动画效果，给用户的感觉就是发货速度很快，主要动画拆解为如下几个步骤：
- 点击按钮后折叠成一个进度条
- 进度条上方出现卡车并出现包裹装车
- 卡车从左到右运动，进度条进度填满
- 按钮恢复原样文案变更并增加绿色打勾
这个效果里面出现的元素较多，就一个卡车就费了不少功夫，还带有进度条的提示，因涉及到的动画步骤及细节较多，此处还是使用gsap实现，基于此还效果可以稍加修改为下载按钮的交互，如下图所示，只不过这里是出现卡车后掉下一个包裹，比较适用于下载的场景。
进度按钮
此交互效果适用于按钮执行时间比较长的场景，比如上传或是下载的时候，这类功能平常遇到的还是比较多的，大都是增加一个loading处理，但以下几个效果相信可以给你新的启发，这部分的效果较多就不详细说明了。
下面整个过程从白色背景到成功后的蓝色背景，再加上文案和图标的向上淡出淡入的动画，整个过程不回给用户很枯燥的感觉，边框，百分比及loading都在变化，相对是比较充实。
这个效果可能有人会说按钮元素太多了，那么看下面这个相对简洁吧，如果是上传可以改变箭头的方向，由下往上过渡完成。
最后来一个用圆环展示进度的形式，效果也是非常简洁舒服。
源码在线预览
结束
今天整体的按钮交互分享就结束了，相信看到这些效果会给在开发中带来一定的启发吧，下次再有老板或业务方说你这个效果还不够炫的时候，拿出这份效果，惊呆掉他们的下巴。但是日常前端开发都是还原设计稿，设计稿不一定如此，但是在适合的场景可以给他们参考，好的交互效果给用户的感觉是很棒的，我们实现更好的交互效果给到用户也是很棒的感觉，耶～
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
那些你不知道的炫酷交互效果系列：
