有趣的css - 文字下划线条动画按钮

news2024/11/29 2:50:11

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 实现文字下划线条动画按钮。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
①用 :after 创建伪元素
②定位 position 属性的使用
③ transition 过渡属性搭配 :hover 伪类的灵活使用

思路：使用 :after 创建伪元素线条动画载体，然后使用 :hover 伪类加 transition 过渡属性来实现线条从左往右过渡视觉效果。

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

核心代码

html 代码

<a href="javascript:;" class="btn44">Design</a>

a 标签文字按钮主体。

css 部分代码

.btn44{
  font-size: 14px;
  font-weight: 700;
  height: 32px;
  line-height: 32px;
  color: #333333;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.btn44:after{
  content: '';
  width: 0;
  height: 2px;
  background-color: #333333;
  position: absolute;
  right: 0;
  bottom: 0px;
  transition: width 0.6s;
}
.btn44:hover:after{
  width: 100%;
  left: 0;
}

1、页面中 a 标签作为文字按钮主体，这里注意要设置 a 标签定位属性 position: relative，然后使用 :after 创建线条伪元素，使用 position 定位到文字按钮下方，当作文字按钮的下划线。

2、给伪元素增加 transiton 过渡属性以及相关参数。

3、使用伪类 :hover 来获取鼠标悬浮状态，当鼠标悬浮在文字按钮上方时，线条元素的宽度会从左往右变成 100%，当鼠标从文字按钮上方移走时，线条元素的宽度就会从左往右变成 0。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>文字下划线条动画按钮</title>
    </head>
    <body>
        <div class="app">
            <a href="javascript:;" class="btn44">Design</a>
        </div>
    </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn44{
  font-size: 14px;
  font-weight: 700;
  height: 32px;
  line-height: 32px;
  color: #333333;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.btn44:after{
  content: '';
  width: 0;
  height: 2px;
  background-color: #333333;
  position: absolute;
  right: 0;
  bottom: 0px;
  transition: width 0.6s;
}
.btn44:hover:after{
  width: 100%;
  left: 0;
}