有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？
前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一定的总结。
下面继续本小节的主题，请先看一下效果示例：
看过前两小节的小伙伴，可能不需要看下面的源码，就知道如何实现了，大家可以先自己动手试试，然后再回头来看看。或许实现方式不一样，但只要能实现，都是好方法。
下面对示例讲解
示例一
解析：
1、 :before top为0， :after bottom为0，高度 height: 2px ，而宽度为0，并且水平居中
2、在绝对定位的作用下， :hover 改变 :before 、 :after 的宽度，即可形成上图效果
示例二
解析：
1、 :before 、 :after ，超出button 2px
2、 :hover 时改变 :before 、 :after 宽高，这里宽高用到了 calc()
calc() 函数用于动态计算长度值。
● 需要注意的是，运算符前后都需要保留一个空格，例如： width: calc(100% - 10px) ；
● 任何长度值都可以使用 calc() 函数进行计算；
● calc() 函数支持 "+", "-", "*", "/" 运算；
● calc() 函数使用标准的数学运算优先级规则；
3、大家应该都留意到了上图中，特意操作了一个属性 mix-blend-mode ，它在这里的作用让button的背景显示出来覆盖在 :before 、 :after 背景色的上方。
css3 mix-blend-mode 语法
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
hue 色相模式 “色相”模式只用“混合色”颜色的色相值进行着色，而使饱和度和亮度值保持不变。
这里就不具体讲述 mix-blend-mode ，希望后面能用一章来专门讲解。
示例三