【CSS】实现按钮hover时背景色从左慢慢移动到右边

已于 2023-04-27 10:33:57 修改
阅读量1.1w 收藏 24
点赞数 7
分类专栏： CSS html 文章标签： css
于 2019-05-10 14:34:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ann295258232/article/details/90059607
版权
CSS 同时被 2 个专栏收录
22 篇文章 1 订阅
订阅专栏
html
13 篇文章 0 订阅
订阅专栏

按钮鼠标移动上去时，新背景色从左到右滑过去
在这里插入图片描述

思路：

1.正常情况下：
按钮通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大，且在按钮的下面，刚开始宽度为0

2.鼠标移动过去:
button的真正的背景色设置为透明，z-index:1
然后给最下面一层的颜色是以前的背景色，z-index:-2，width:100%
按钮下面一层，z-index:-1,背景色为新背景色，width:100%,再设置个过渡动画

通过这个技巧可以实现这个效果：

<!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>

在线预览和编辑测试：

Plunker - 按钮hover时背景色从左慢慢移动到右边

在这里插入图片描述

向着光芒的女孩
关注
  • 7
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS——css3 animation 动画实现元素从右向左循环滚动
qq_43201350的博客
04-05 552
CSS——css3 animation 动画实现元素从右向左循环滚动
纯CSS3Hover按钮边框动画特效.zip
07-11
Hover是CSS的一个伪类选择器，当用户将鼠标指针悬停在某个元素上时，该选择器就会被触发，允许我们为元素定义不同的样式，例如改变背景色、边框或添加动画效果。 在“纯CSS3 Hover按钮边框动画特效”中，主要涉及...
通过css实现按钮hover时背景色从左慢慢移动到右边
chelflan's blog
09-01 1536
通过css实现按钮hover时背景色从左慢慢移动到右边直接上代码 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
css从左到右弹出的效果,Vue transition实现从屏幕右边往左进入过渡效果
weixin_36393239的博客
08-03 1876
想要实现这个div.good从右往左出现到屏幕的过渡效果，实现不了，我觉得应该是css的问题，不知道怎么修改。代码如下：标签内的js代码可忽略。 export default {props: {food: {type: Object}},data () {return {showFlag: false};},methods: {show () {this.showFlag = t...
Vue3 Transition组件给页面切换加动画效果
前端咸鱼翻身的博客
05-05 9632
使用Vue3自带的Transition组件给页面组件之间切换加过渡效果，主要应用在移动端设备，改善用户的交互体验。
vue css渐入渐出,vue中渐进过渡效果实现
weixin_39949776的博客
08-03 4047
本文实例为大家分享了vue 渐进过渡效果，供大家参考，具体内容如下，供大家参考，具体内容如下transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger：或者，提供一个钩子 stagger, enter-stagger 或 leave-stagger，以更好的控制：Vue.transition('...
css实现背景色从左往右出现
qq_45243719的博客
02-10 2101
css实现背景色从左往右出现
vue router 右到左过渡动画
最新发布
twins3520的博客
01-24 656
这样就完成了基本的Vue Router右到左过渡动画的设置。当跳转不同的路由时，会应用上述定义好的过渡动画效果。组件来添加过渡动画。要实现从右向左的过渡动画，需要使用CSS样式来定义过渡效果。Vue Router提供了内置的路由切换效果，可以通过设置。最后，在App.vue文件中使用。
CSS去除移动端点击时元素产生的背景色 （推荐）
09-22
在移动设备上，当用户点击一个元素时，浏览器通常会为该元素添加一个短暂的高亮背景色，这是为了提供视觉反馈，表明用户已成功触发了触摸事件。然而，在某些设计场景下，这种默认的背景色可能不符合界面的美观要求...
纯CSS3实现简易3D按钮特效代码
03-20
为了增加更多视觉效果，我们可以使用伪类`:active`来定义按钮被按下时的状态，例如改变背景色或进一步调整3D变换。此外，通过`@keyframes`规则，我们可以创建自定义动画，例如按钮在被点击后恢复原状的动画。 ```...
纯css3 hover简单按钮悬停动画特效
11-04
在按钮设计中，我们可以利用:hover来改变按钮在鼠标悬停时的样式，从而实现动画效果。 以下是一个基础的HTML结构，用于创建一个按钮： ```html <button class="hover-effect">点击我 ``` 接下来，我们用CSS3来...
纯css实现按钮开关效果
05-15
以上CSS代码定义了当checkbox被选中时，label的背景色变为蓝色，滑块向右移动至开关的另一侧。`transition`属性提供了平滑的动画效果，使得开关的切换过程更加自然。 为了增加更多的交互体验，我们还可以添加`:...
CSS3实现button:hover时background-color从左慢慢移动到右边
草巾冒小子的博客
10-24 2252
CSS3实现button:hover时background-color从左慢慢移动到右边 <!DOCTYPE html> <html lang="en"> <head> <style> .btn{ position: relative; ...
vue使用css3实现选项卡动画切换
qq_31676725的博客
12-20 1500
我们先来看看实现的效果 效果是鼠标放上去的时候，会出现一个下边框，并且这个下边框会从中间往两边撑开的动画，鼠标划出来后下边框又会从两边往中间慢慢缩短并消失的效果。 好呐我们来看看代码 首先我们写好一个循环的li标签，v-for，指定的:key值， @mouseover鼠标放上去的事件，@mouseout鼠标划出来的事件。 <li v-for="(item,index) in listIn...
css 实现一个div的背景颜色从左到右慢慢出现 里面文字颜色也改变
我不晓得
11-07 4535
.news-list{ width: 55%; position: absolute; top:0px; height: 400px; z-index: 10; left:0px; } .news-list ul li{ float: left; background:#fff; width: 100%; height: 110px; box-sizing...
css如何实现鼠标放到按钮上从左往右动画移入[可看示例]
熟悉 vue2 vue3 jquery js echarts
07-05 1052
.hot_products_right_nav .hot_products_right_tit{ cursor: pointer; width: 112px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #4a8cf6; float: left; margin-left: 20px; font-size: 13px; positio
VUE实现网页中滚动鼠标时导航背景颜色透明度的改变
qq_30228701的博客
11-30 2982
1、HTML <div id="topNav" :style="topNavBg"> 这里是导航内容 </div> 2、JS export default { data () { return { topNavBg: { backgroundColor: '' } } }, mounted () { window.addEventListener('scroll', this.handleScroll) // 监听
vue 多个li点击动态切换背景颜色,及多个class混合使用
周家大小姐
06-29 1710
父组件 <div class="list-content" v-for="(item ,i) in projectList" :key="i"> <project-list :isActive="isActive" :curIndex='i' :project="item" @clickItem="handleItem(i)" /> </div> export default { data() {..
vue记录鼠标拖拽划过位置并将划过位置变色
weixin_45966674的博客
05-21 1148
这里需要注意的是 必须加上onDragOver否则 只会记录第一个 开始拖动的那个 例如 你鼠标拖拽划过 2345 如果没有onDragOver 就只有2会进去。之所以 在item外面套个 ES6的模板字符串 是因为 我们存入backups的是标签属性keyId getAttribute 获取的标签属性的值都是字符串。//先清空backups 然后 将拖动的元素的keyId标签属性装进backups。大家 可以读一下上面的注释 我们还是比较用心的。鼠标拖拽经过 45。
css写一个按钮移动移出从左到右的渐变背景动画
05-26
可以使用CSS3的transition和linear-gradient属性实现一个从左到右的渐变背景动画，以下是示例代码： HTML代码： ``` <button class="gradient-btn">按钮</button> ``` CSS代码： ```css .gradient-btn { background-image: linear-gradient(to right, #f9d423, #ff4e50); background-size: 200% auto; transition: all 0.5s ease-out; } .gradient-btn:hover { background-position: right center; } ``` 解释： * `background-image: linear-gradient(to right, #f9d423, #ff4e50);` 设置按钮的背景为从左到右的渐变色，使用了CSS3的linear-gradient属性。 * `background-size: 200% auto;` 设置背景大小为原来的两倍，这样在移动时可以展示整个渐变过程。 * `transition: all 0.5s ease-out;` 设置按钮的所有属性在0.5秒内平滑过渡，使用了CSS3的transition属性。 * `.gradient-btn:hover { background-position: right center; }` 设置鼠标移入时背景位置从左边移到右边，这里使用了CSS3的:hover伪类。 效果如下： ![Gradient Button Animation](https://i.imgur.com/SFg2XoB.gif)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值