前端特效【第02期】|多功能提交按钮

image

话说提交按钮可能是我们工作生活中最常见的东西了，比如我现在在写这篇文章，下面就有一个大大的按钮，甭管上面写的什么文字，我知道点了那个按钮，我这篇文章就算是发出去了。所以按钮的作用可见一斑。

但是一般的按钮是很难满足我们所有的需求的，或者说很难满足用户的心理预期的。

从设计的角度出发，按钮应该至少存在五中状态：默认状态，悬停状态，点击状态，选中状态以及禁用状态。不过我们平常很难见到这样的按钮，能有三个状态已经是很难得了

另外从用户体验角度出发，按钮应该满足这三个功能：操作之前可预知，操作之中有反馈，操作之后可撤销。由此可见，要做一个按钮还真不是一件简单的事情。不过我们应该要朝着这个方向去努力。

那么今天给大家带来的这一款按钮呢，我觉得是按钮的一点小小的进步，先来看看效果吧

image

在点击之前感觉和普通的按钮也没啥区别。不过点击之后就有点意思了，先是按钮缩短，缩成一个圆，然后一个圆形的加载进度，进度条可是21世纪最伟大的发明哦！加载完成了之后再显示一个成功的状态。

如果说我们把中间的过程再加一些功能的话满足前面提到的条件其实是没有问题的。

那么这么一个按钮我们来看看是如何来实现的呢：先把它拆了，一个东西只有把它拆开，我们才能知道它里面的原理：

image

拆开了之后就能看得很清楚了，画面分成了三层，分别是背景，按钮和进度条。所以说我们看到的进度条其实是一开始就放在那个位置了的，只是当我们点击之后才显示出来而已。所以说整个效果大致可以分成三部分：

1，点击之后按钮缩短

2，进度条

3，进度条走完之后显示成功状态

其实在这里面难点估计就是进度条的问题了，这里是用纯css画的圆环进度条哦，所以对大家css的基础要求可能要稍微高一点，然后这里面用到的知识点呢有这么些：

1,transform  css变换（这里主要用到rotate旋转函数）

2,transition, transition-delay

3,border-radius

4,:focus伪类 “~”毗邻元素选择器

以上是我对这个小效果的文字版简单的介绍，不喜欢看文字的小伙伴们，可以看下方的视频简介版哦；

视频观看地址：https://v.qq.com/x/page/e0774szxbi8.html

看完视频介绍版后，你是否对这个效果有思路了呢，如果还不知道从何做起的话，没关系，那就让我们继续看下方的详细讲解实现过程的视频吧

视频观看地址：https://v.qq.com/x/page/d0774bctmon.html
TOM前端特效-多功能提交按钮-详细1

视频观看地址：https://v.qq.com/x/page/f077422gmms.html
TOM前端特效-多功能提交按钮-详细2

由于微信小视频发送的限制，最后一集详解视频只能发链接啦，大家点击下方链接，就可以继续观看：

TOM前端特效-多功能提交按钮-详细2 的内容啦~~

视频地址：https://v.qq.com/iframe/player.html?vid=n0774skp5tm

订阅号ID：Miaovclass

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；