动态文字按钮，常适用于独立按钮入口，引导用户点击。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<button class="btn75">HOVER</button>按钮主体标签代码。
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 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>上下线条左右滑动按钮</title>
</head>
<body>
<div class="app">
<button class="btn75">HOVER</button>
</div>
</body>
</html>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);
}本文共 307 个字数,平均阅读时长 ≈ 1分钟
评论 (0)