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实现多彩渐变按钮系列特效

相关推荐
0wioiw06 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠31 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯38 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调1 小时前
记一次 Vite 下的白屏优化
前端·css
1undefined21 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js