大家好,我是 Just,这里是「设计师工作日常」,今天分享的是一个带有图标动效的引导式按钮,适用于阅读详情的引导点击场景。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
①:hover
获取鼠标状态来切换样式
② 伪元素:before
、:after
的使用
③animation
动画的使用
思路:分别创建图标内容以及文字内容,然后根据鼠标状态来让图标背景变宽,然后让图标滑动起来。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
button
标签作为按钮主体,然后在button
标签内创建两个span
标签,分别是图标内容class="icon58"
以及文字内容class="btn-text58"
。
css 部分代码
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 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!