CSS3实现button:hover时背景色从左向右慢慢移动(慢动画)

<!DOCTYPE html>
<html lang="en"><head><style>.btn{position: relative;width: auto;min-width: 120px;padding: 10px;text-align: center;color: #fff;background: #00d463;cursor: pointer;border-radius: 4px;border: none;}.btn:after,.btn:before {content: '';position: absolute;left: 0;top: 0;width: 0;height: 100%;background: #00d463;z-index:-2;border-radius: 4px;}.btn:hover{z-index:1;background:transparent;}            .btn:before {transition: .3s;background: #14ae5c;z-index:-1;}          .btn:hover:after,.btn:hover:before {width: 100%;}</style></head><body><button class="btn">Try Free</button></body>
</html>

免责说明：（上述代码版权声明）
版权声明：本文为CSDN博主「向着光芒的女孩之littleAnn」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ann295258232/article/details/90059607

以上就是关于“ CSS3实现button:hover时background-color从左慢慢移动到右边 ” 的全部内容。

CSS3实现button:hover时background-color从左慢慢移动到右边相关推荐

【CSS】实现按钮hover时背景色从左慢慢移动到右边
按钮鼠标移动上去时,新背景色从左到右滑过去思路: 1.正常情况下: 按钮通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大,且在按钮的下面,刚开始宽度为0 2.鼠标移动过去: ...
android按钮背景颜色函数,Android按钮背景颜色(Android button background color)
Android按钮背景颜色(Android button background color) 我想在我的应用程序中设置按钮的背景颜色,我无法实现我想要的结果... 我试图设置的颜色是holo_gree ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法二）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 el-table提示框样式优化
目录一.el-table内容较多时隐藏,hover时换行显示二.总结一.el-table内容较多时隐藏,hover时换行显示 1.在需要隐藏的列el-table-column中加上属性 :s ...
CSS实现某元素hover时所有兄弟节点样式改变
2019独角兽企业重金招聘Python工程师标准>>> css 提供的兄弟节点选择器有两种第一种:+ 相邻兄弟选择器( li + li )只能选择与自己紧紧相连的身后的一个兄弟, ...
div 设置 hover时边框颜色_CSS 奇思妙想边框动画
border 属性谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed. 除了最常见的 solid,dashed,CSS border 还支 ...
css3实现div hover阴影效果
用css3实现div hover阴影效果 <!DOCTYPE html> <html lang="en"&g ...

CSS3实现button:hover时background-color从左慢慢移动到右边

CSS3实现button:hover时背景色从左向右慢慢移动(慢动画)

CSS3实现button:hover时background-color从左慢慢移动到右边相关推荐

最新文章

热门文章