CSS技巧专栏:一日一例 12 -纯CSS实现边框上下交错的按钮特效

CSS技巧专栏:一日一例 12 -纯CSS实现边框上下交错的按钮特效

大家好,今天我们来做一个上下边框交错闪动的按钮特效。

本例图片

案例分析

虽说这按钮给人的感觉就是上下两个边框交错变换了位置,但我们都知道border是没法移动的。那么这个按钮是如何实现的呢?你想到了吗?

没错,还是伪元素。利用before和after,可以绘制两个蓝色的边,然后,只要让他们动起来就行了。简单易行!

布局代码

html 复制代码
<button class="base ">边框上下交错闪动</button>

基础样式

css 复制代码
: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;
}

按钮样式

那么我们先来给它两个层:

css 复制代码
.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结构增加新的类名。

html 复制代码
<button class="base btn_rise">边框上下交错闪动</button>

悬浮动画

当鼠标移动到按钮上时,我们需要上面的元素移动到下面来,下面的元素移动到上面去。思路清晰了,样式表写起来就会得心应手:

css 复制代码
.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实现多彩渐变按钮系列特效

相关推荐
Json_1817901448029 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端