有趣的css - 打字机动效按钮

设计师工作日常

已于 2025-01-17 20:43:54 修改

阅读量955

点赞数 11

分类专栏：有趣的css 文章标签： css 前端动效设计 ux/ui 交互设计按钮打字机效果

于 2025-01-06 13:42:26 首次发布

本文链接：https://blog.youkuaiyun.com/justliu1989/article/details/144961801

版权

有趣的css 专栏收录该内容

94 篇文章

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是利用过渡属性来让按钮上的文字逐渐显示出来达到一个打字机效果的动画按钮。

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

整体效果

在这里插入图片描述

💎知识点：
1️⃣ :before 和 :after 伪元素选择器
2️⃣ transition 过渡属性
3️⃣ -- 自定义属性（css变量）以及 var(...) 引用自定义属性值函数和 calc(...) 计算属性值函数

🔑思路：
创建一个按钮标签，基于按钮标签创建两个伪元素，通过定位设置不同的层级，然后改变其元素的背景，以及文字过渡显示。

利用过渡属性来让按钮上的文字逐渐显示出来达到一个打字机效果的动画按钮，适用于界面中的各种主入口，引导用户点击进入。

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

核心代码

html 代码

<button class="btn81">HOVER</button>

按钮主体，一个 button 标签。

css 部分代码

.btn81{
--hover-text:'HOVER';
--b-color:#7ead63;
padding:0 32px;
height:56px;
font-size:18px;
letter-spacing:2px;
color:var(--b-color);
font-weight: bold;
position: relative;
background-color: transparent;
border:1px solid var(--b-color);
outline: none;
border-radius:7px;
cursor: pointer;
overflow: hidden;
}
.btn81:before{
content:'';
width:0;
height:100%;
position: absolute;
top:0;
left:0;
background-color:var(--b-color);
transition: width 0.3s ease-in-out;
z-index:1;
cursor: pointer;
}
.btn81:hover:before{
width:100%;
}
.btn81:after{
content:var(--hover-text);
width:0;
color:#ffffff;
z-index:10;
position: absolute;
left:32px;
transition: width 0.3s steps(5,end);
overflow: hidden;
box-sizing: border-box;
z-index:2;
cursor: pointer;
}
.btn81:hover:after{
width:calc(100%-64px);
transition-delay:0.4s;
}
.btn81:active{
transform:scale(0.98);
}

1、定义按钮的基本样式，定义自定义css属性 --hover-text 和 --b-color 。

2、基于按钮标签创建 :before 伪元素，定义基本样式以及背景色，设置过渡属性 transition: width 0.3s ease-in-out; ，让 :before 伪元素的宽度值过渡显示；然后给 :before 伪元素增加鼠标悬浮效果，当鼠标悬浮时，宽度值变为 100% 。

3、基于按钮标签创建 :after 伪元素，定义基本样式，利用 content 属性获取自定义的文字内容元素，同样加上过渡属性 transition: width 0.3s steps(5,end); ，注意这里使用的是过渡步骤属性 steps(...) 。

4、利用 :hover 选择器，给 :after 伪元素设置鼠标悬浮效果，让 :after 伪元素宽度过渡显示，并且加上延迟属性 transition-delay ，让它在 :before 伪元素显示完成后再显示。

5、最后给按钮整体增加一个按住缩放的效果就可以了。

注意这里 :after 伪元素悬浮效果的代码中，宽度值不是 100%，而是 calc( 100% - 64px) ，因为要基于过渡步骤显示，所以这里的宽度即是文字内容的实际宽度。

完整代码如下

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="btn81">HOVER</button>
</div>
</body>
</html>

css 样式

/** style.css **/
.app{
width:100%;
height:100vh;
background-color:#ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn81{
--hover-text:'HOVER';
--b-color:#7ead63;
padding:032px;
height:56px;
font-size:18px;
letter-spacing:2px;
color:var(--b-color);
font-weight: bold;
position: relative;
background-color: transparent;
border:1px solid var(--b-color);
outline: none;
border-radius:7px;
cursor: pointer;
overflow: hidden;
}
.btn81:before{
content:'';
width:0;
height:100%;
position: absolute;
top:0;
left:0;
background-color:var(--b-color);
transition: width 0.3s ease-in-out;
z-index:1;
cursor: pointer;
}
.btn81:hover:before{
width:100%;
}
.btn81:after{
content:var(--hover-text);
width:0;
color:#ffffff;
z-index:10;
position: absolute;
left:32px;
transition: width 0.3s steps(5,end);
overflow: hidden;
box-sizing: border-box;
z-index:2;
cursor: pointer;
}
.btn81:hover:after{
width:calc(100%-64px);
transition-delay:0.4s;
}
.btn81:active{
transform:scale(0.98);
}