也是在制作项目时发现的，找了很多demo，一点一点测试，发现这个按钮也是非常的炫酷

用到了几个属性，@keyframes，::after,::before

先了解一下他们分别都是干嘛的

@keyframes

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换（transition）相比，关键帧 keyframes 可以控制动画序列的中间步骤。

怎么使用关键帧：

要使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

::after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

他的语法格式：

element:after  { style properties }  /* CSS2 语法 */element::after { style properties }  /* CSS3 语法 */

::after 表示法是在CSS 3 中引入的，::符号是用来区分[伪类](/zh-CN/CSS/Pseudo-classes)和伪元素的。支持 CSS3 的浏览器同时也都支持 CSS2 中引入的表示法:after`。

::before

在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。

利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。

就比如：在链接前面加一个星星等..

a::before{
content:"★"
}

好了就先这样，先看一下今天的主题：

按钮实现效果：

整体代码如下：

按钮