大家好,我是 Just,这里是「设计师工作日常」,今天分享的是一个带有图标动效的引导式按钮,适用于阅读详情的引导点击场景。
最新文章通过公众号「设计师工作日常」发布。
(目录)
整体效果
知识点: ①
:hover
获取鼠标状态来切换样式 ② 伪元素:before
、:after
的使用 ③animation
动画的使用
思路:分别创建图标内容以及文字内容,然后根据鼠标状态来让图标背景变宽,然后让图标滑动起来。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
<button class="btn58">
<span class="icon58"></span>
<span class="btn-text58">查看详情</span>
</button>
button
标签作为按钮主体,然后在button
标签内创建两个span
标签,分别是图标内容class="icon58"
以及文字内容class="btn-text58"
。
css 部分代码
.btn58{
width: 120px;
height: 32px;
position: relative;
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
display: flex;
justify-content: left;
align-items: center;
}
.icon58{
width: 32px;
height: 32px;
position: relative;
box-sizing: border-box;
background-color: #ffd845;
display: block;
border-radius: 16px;
transition: 0.3s;
}
.icon58:before,.icon58:after{
content: '';
width: 3px;
height: 10px;
background-color: #000000;
display: block;
position: absolute;
top: 8px;
left: 16px;
transform: rotate(-45deg);
}
.icon58:after{
top: 14px;
left: 16px;
transform: rotate(45deg);
}
.btn-text58{
font-size: 16px;
color: #000000;
font-weight: bold;
display: block;
position: absolute;
left: 40px;
}
.btn58:hover .icon58{
width: 120px;
}
.btn58:hover .icon58:before,.btn58:hover .icon58:after{
animation: move58eff 1.2s linear infinite;
}
@keyframes move58eff{
0% {
left: 16px;
}
50% {
left: 26px;
}
100% {
left: 16px;
}
}
1、先定义图标
.icon58
整体的样式,然后利用伪元素.icon58:before
、.icon58:after
绘制两个矩形,并transform: rotate(...)
旋转两个矩形的角度,形成箭头图标。
2、定义文字内容
.btn-text58
样式,设置position: absolute;
,调整合适的位置,让其与图标内容对齐,间距合适就好 。
3、根据
button
标签主体的:hover
状态,让图标内容.icon58
的背景宽度增加,包裹住旁边的文字内容,且有一定的间距即可;然后给图标内容.icon58
增加过渡属性transition: 0.3s;
,这样图标背景变宽时,就会有过渡变化效果。
4、根据图标内容最后变宽的宽度值,给
button
主体定义同样宽度即可,还有让其背景透明background-color: transparent;
。
完整代码如下
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="btn58">
<span class="icon58"></span>
<span class="btn-text58">查看详情</span>
</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;
}
.abtn57{
width: 140px;
height: 46px;
list-style: none;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
background: #457356;
position: relative;
cursor: pointer;
border-radius: 23px;
overflow: hidden;
}
.btn57,.bg57{
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
color: #ffffff;
}
.bg57{
position: absolute;
text-shadow: 90px 0 #fff, -90px 0 #fff,-180px 0 #fff;
animation: effx57 1.2s linear infinite;
display: none;
}
@keyframes effx57{
to{
transform: translateX(90px);
}
}
.abtn57:hover .bg57{
display: block;
}
.abtn57:hover .btn57{
display: none;
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!