按钮模版:Btn-4
按钮模版:btn-4
参考 CodePen 首页按钮实现的
效果展示
实现思路
使用 ::before
伪元素绘制了一个渐变色背景
在鼠标悬停时,使用 animation
属性给 ::before
伪元素添加了一个 flow
动画,使其渐变色背景从左至右流动
这个动画使用 translateX
函数来实现,让渐变色背景在 X 轴上平移
为了使文字不被背景图片遮盖,使用了 z-index
属性为其设置层级
并通过给 span
元素设置背景色和圆角来使其与父元素形状相同
实现代码
1 | <button class="btn-4"><span>BTN-4</span></button> |
1 | @keyframes flow { |
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 View Room
评论