CSS技巧专栏：一日一例 12 -纯CSS实现边框上下交错的按钮特效
大家好，今天我们来做一个上下边框交错闪动的按钮特效。
本例图片
案例分析
虽说这按钮给人的感觉就是上下两个边框交错变换了位置，但我们都知道border是没法移动的。那么这个按钮是如何实现的呢？你想到了吗？
没错，还是伪元素。利用before和after，可以绘制两个蓝色的边，然后，只要让他们动起来就行了。简单易行！
布局代码
<button class="base ">边框上下交错闪动</button>基础样式
:root{--main-bg-color: #000;--color:#000;--hover-color:#993399;
}
button{margin: 0.3em;outline: 0;border: none;
}
.base{position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */font-family: "微软雅黑", sans-serif;font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ font-weight:700;color: var(--color); /* 文字颜色为预定义的前景色 */cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */user-select: none; /* 让用户不能选择按钮上的文字 */white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */transition: all .5s; /* 按钮响应动画效果的持续时间 */margin: 1.5rem 2rem;
}按钮样式
那么我们先来给它两个层：
.btn_rise{position: relative;border-radius: 0px;
}
.btn_rise::before,
.btn_rise::after {display: block;position: absolute;transition: all .2s;content: "";height: 3px;width: 100%;background: #139ce4;bottom: 0; left:0;
}
.btn_rise::after{top:0;
}这部分写完了，别忘了给html结构增加新的类名。
<button class="base btn_rise">边框上下交错闪动</button>
悬浮动画
当鼠标移动到按钮上时，我们需要上面的元素移动到下面来，下面的元素移动到上面去。思路清晰了，样式表写起来就会得心应手：
.btn_rise:hover::after{top: calc(100% - 3px);
}
.btn_rise:hover::before{bottom: calc(100% - 3px);
}这里都不用使用什么位移动画，关键帧动画。我们只要简单的修改他们的位置就行了。
大功告成啦！
按照这个思路，我们还可以修改它的颜色啊，宽度，高度啊，形状啊，透明度啊，各种玩法有没有？所以，实现效果的核心不是代码，而是想象力。大家可以充分发挥一下主观能动性，做出更多精彩的按钮来！
希望大家喜欢！别忘了帮我点赞加收藏哦~
本专栏其他文章：
CSS技巧专栏：一日一例1.会讨好的热情按钮
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效
CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效
CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效
CSS技巧专栏：一日一例 10 -纯CSS实现表爱心的小可爱按钮特效
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
