有趣的css - 上下线条左右滑动按钮

老K博客

发布于 2024-06-06 09:32:12

680

发布于 2024-06-06 09:32:12

文章被收录于专栏：老K博客老K博客

动态文字按钮，常适用于独立按钮入口，引导用户点击。

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

核心代码

html 代码

HOVER

按钮主体标签代码。 css 部分代码

.btn75{
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: 4px;
  border: none;
  outline-style: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: color 0.4s linear;
}
.btn75:before,.btn75:after{
  content: '';
  width: 0;
  height: 2px;
  background-color: #ff3a85;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.4s linear;
}
.btn75:after{
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}
.btn75:hover:before,.btn75:hover:after{
  width: 100%;
}
.btn75:hover{
  color: #ff3985;
  text-shadow: 0 4px 10px rgba(238,99,150,0.4);
}

1、按钮标签添加基本样式，定义 outline-style: none ; ，取消按钮默认轮廓样式，定义按钮背景透明 background-color: transparent ; 。

2、给按钮添加 transition 过渡属性，定义为 transition: color 0.4s linear ; ，让 color 字体颜色过渡显示。

3、基于按钮标签，通过 :before 和 :after 伪元素选择器，创建两个默认宽度为 0 、高度为 2px 的矩形，通过 position 定位属性，分别让两个矩形定位到按钮的上下边框位置。

4、给 :before 和 :after 两个伪元素矩形添加 transition 过渡属性，定义为 transition: width 0.4s linear ; ，让 width 宽度过渡显示。

5、利用 :hover 选择器，给 :before 和 :after 两个伪元素矩形添加鼠标悬浮效果，当鼠标悬浮到其上方时，两个伪元素矩形宽度变为 100% ；同时给按钮添加鼠标悬浮效果，当鼠标悬浮到按钮上方时，按钮中的文字颜色过渡变化，且增加投影效果。

完整代码如下

html 页面

    上下线条左右滑动按钮
  
  
    
      HOVER

css

.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn75{
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: 4px;
  border: none;
  outline-style: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: color 0.4s linear;
}
.btn75:before,.btn75:after{
  content: '';
  width: 0;
  height: 2px;
  background-color: #ff3a85;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.4s linear;
}
.btn75:after{
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}
.btn75:hover:before,.btn75:hover:after{
  width: 100%;
}
.btn75:hover{
  color: #ff3985;
  text-shadow: 0 4px 10px rgba(238,99,150,0.4);
}