大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个交互感比较强的动效按钮。

最新文章通过公众号「设计师工作日常」发布。

目录

整体效果

有趣的css - 边框动效按钮_动效按钮

知识点：
① content: attr(...) 的用法
② 伪元素 :before 、:after
③ animation 动画
④ transition 过渡属性
⑤ position 定位

思路：
透明按钮，鼠标悬浮时，让四周的边框通过动画效果出现，过渡时显示按钮阴影。

交互感比较强的一个动效按钮。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="btn60" data-text="更多详情">
  <div class="border-tb-60"></div>
  <div class="border-lr-60"></div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.

.btn60 整体按钮标签，增加 data-text 自定义属性；下面两个子元素 .border-tb-60 和 .border-lr-60 用来做边框元素。

css 部分代码

.btn60{
  width: 124px;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s linear;
}
.btn60:after{
  content: attr(data-text);
  position: relative;
}
.border-tb-60:before{
  content: '';
  width: 0;
  height: 3px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
}
.border-tb-60:after{
  content: '';
  width: 0;
  height: 3px;
  background-color: black;
  position: absolute;
  top: 47px;
  right: 0;
}
.border-lr-60:before{
  content: '';
  width: 3px;
  height: 0;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
}
.border-lr-60:after{
  content: '';
  width: 3px;
  height: 0;
  background-color: black;
  position: absolute;
  top: 0;
  left: 121px;
}
.btn60:hover{
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.btn60:hover .border-tb-60:before,.btn60:hover .border-tb-60:after{
  animation: eff60 .3s linear forwards;
}
.btn60:hover .border-lr-60:before,.btn60:hover .border-lr-60:after{
  animation: eff601 .3s linear forwards;
}
@keyframes eff60{
  to{
    width: 100%;
  }
}
@keyframes eff601{
  to{
    height: 100%;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.

1、定义整体按钮 .btn60 的大小等样式，定义 flex 布局，定义内容平行垂直居中；利用 :after 创建伪元素 .btn60:after，并用 content 搭配 attr(...) 获取 data-text 的值，创建文字元素。

2、当鼠标状态 :hover 时，整体按钮增加阴影效果 box-shadow ；给 .btn60 增加过渡属性 transition ，定义参数 transition: .3s linear ，让阴影显示增加过渡效果。

3、基于标签 .border-tb-60 和 .border-lr-60 分别创建伪元素 :before 和 :after ，定义为按钮的四周边框；然后使用 position: absolute 相对定位，将上下边框分别定位到靠左和靠右，左右边框分别定位到靠下和靠上；上下边框定义样式高度为 3px，左右边框定义样式宽度为 3px。

4、根据鼠标状态，当 :hover 鼠标悬浮到按钮上方时，分别给四周的边框伪元素增加一个动画 animation ，分别为 eff60 和 eff601，上下的边框伪元素的动画是让宽度从 0 变化到 100%；左右的边框伪元素的动画是让高度从 0 变化到 100% 。

5、这里的动画属性注意设置为 forwards ，让动画停止在最后一帧，这样四周的边框就不会在动画结束后消失。

注意： 伪元素边框进行定位时，注意其 top 、left 、 right 、 bottom 的灵活使用。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>边框动效按钮</title>
  </head>
  <body>
    <div class="app">
      <div class="btn60" data-text="更多详情">
        <div class="border-tb-60"></div>
        <div class="border-lr-60"></div>
      </div>
    </div>
  </body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn60{
  width: 124px;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s linear;
}
.btn60:after{
  content: attr(data-text);
  position: relative;
}
.border-tb-60:before{
  content: '';
  width: 0;
  height: 3px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
}
.border-tb-60:after{
  content: '';
  width: 0;
  height: 3px;
  background-color: black;
  position: absolute;
  top: 47px;
  right: 0;
}
.border-lr-60:before{
  content: '';
  width: 3px;
  height: 0;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
}
.border-lr-60:after{
  content: '';
  width: 3px;
  height: 0;
  background-color: black;
  position: absolute;
  top: 0;
  left: 121px;
}
.btn60:hover{
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.btn60:hover .border-tb-60:before,.btn60:hover .border-tb-60:after{
  animation: eff60 .3s linear forwards;
}
.btn60:hover .border-lr-60:before,.btn60:hover .border-lr-60:after{
  animation: eff601 .3s linear forwards;
}
@keyframes eff60{
  to{
    width: 100%;
  }
}
@keyframes eff601{
  to{
    height: 100%;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.

页面渲染效果

有趣的css - 边框动效按钮_动效按钮

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

我是 Just，这里是「设计师工作日常」，求点赞求关注！