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技巧专栏:一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏:一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
CSS技巧专栏:一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效
CSS技巧专栏:一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效