CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效

CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效

在本篇，我们分享一个和上一篇文章看起来很像的按钮，但实际上，却不是使用相同的技巧实现的。还是老规矩，先发图片，感兴趣的同学可以继续看。

特此说明

本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式，都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起，本专栏都将直接跳过前面的内容（清除浏览器默认设置样式，按钮基础样式），不再重复复制，需要了解按钮基础样式的同学，请移步：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。

本例图片

观察分析

仔细观察这个按钮，这个按钮其实就是两层边框就够了。一层是黑色框，一层是粉色框。重点是如何让粉色的边框依次去替换黑色的。

布局代码

<div class="container"> 
    <button class="base border_btn">等我把你围起来</button> 
</div>

基础样式

: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;
}

按钮样式

.border_btn {  
  position: relative;  
  box-shadow: inset 0 0 0 5px #666;    
  color: #666; 
  transition: color 1s;
  border-radius: 0rem; /* 去掉base样式中的圆角 */
  box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, .15));/* 倒影 */
  -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, .15)); /* 倒影 */
}

在这个按钮的样式表里没有写border，而是利用box-shadow内阴影属性弄模拟了边框。其实使用border也是可以实现同样效果的，只是要稍微调整一下before 和 after 层的位置。

接着再写用来响应鼠标悬停动画的边框，还是老办法，利用它的 before 和 after 两个伪元素。

.border_btn::before,
.border_btn::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-radius: 0rem;
    box-sizing: border-box;    
    border: 5px solid transparent;
}

这次就直接写border就好了。border的定位与按钮对齐。

悬浮动画

.rectangle {
    &::after {
        top: unset;
        left: unset;
        right: 0;
        bottom: 0;
    }
    
    &:hover {
        color: var(--hover-color);        
        &::before {
            transition: width .5s, height .5s, border-bottom-color 0s;
            transition-delay: .5s, 0s, .5s;
            width: 100%;
            height: 100%;
            border-left: 5px solid  var(--hover-color);
            border-bottom: 5px solid  var(--hover-color);
        }

        &::after {
            transition: width 1.5s, height .5s, border-top-color .5s;
            transition-delay: 1.5s, 1s, 1.5s;
            width: 100%;
            height: 100%;
            border-top: 5px solid  var(--hover-color);
            border-right: 5px solid  var(--hover-color);
        }
    }   
}

为了让动画变的慢一点，我将时间间隔调整的比较大。你若是希望快一点，可以修改

.rectangle {
    &::after {
        top: unset;
        left: unset;
        right: 0;
        bottom: 0;
    }
    
    &:hover {
        color: var(--hover-color);        
        &::before {
            transition: width .25s, height .25s, border-bottom-color 0s;
            transition-delay: .25s, 0s, .25s;
            width: 100%;
            height: 100%;
            border-left: 5px solid  var(--hover-color);
            border-bottom: 5px solid  var(--hover-color);
        }
        &::after {
            transition: width .25s, height .25s, border-top-color .5s;
            transition-delay: 0.75s, 0.5s, 0.75s;
            width: 100%;
            height: 100%;
            border-top: 5px solid  var(--hover-color);
            border-right: 5px solid  var(--hover-color);
        }
    }   
}

好了，刷新浏览器试试？

诶？怎么没动呢？？？

---------------------------  画外音忍不住要吐糟了：你TM没有把动画类写在按钮上！

哦哦哦！快点补上：

<button class="base border_btn rectangle">等我把你围起来</button>

再去刷新浏览器，这下可以了！看看动画效果：

知识点：CSS中的&代表的什么

& 表示嵌套的上一级

这是sass的语法，代表上一级选择器，比如：

ol{ 
    margin-top: 20px; 
    & >li { 
        margin-top: 0; 
    } 
}

编译成css写法：

ol{margin-top: 20px;}
ol > li {margin-top: 0;}

顺便说明一下 ">"，后面会有详细文章说明css的选择器

" > " 子选择器：通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，

ul>li{ color:red; }

ul > li 表示：将选择所有 ul 元素的直接子元素li中的元素。

按钮完成

今天的这一篇就到这里了！感谢您的阅读！再见！小伙伴们，别忘了点赞收藏哦！

本专栏其他文章：

CSS技巧专栏：一日一例1.会讨好的热情按钮

CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效

CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效

CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效

CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效

CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效

CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效