按钮实现鼠标悬停背景色渐变的动画特效

简介: Title input { position: absolute; top: 50%; ...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-transform: uppercase;
            width: 200px;
            height: 40px;
            border: 1px solid #000;
            background: -webkit-linear-gradient(90deg, #fff, #fff, #000, #000);
            background:    -moz-linear-gradient(90deg, #fff, #fff, #000, #000);
            background:      -o-linear-gradient(90deg, #fff, #fff, #000, #000);
            background:         linear-gradient(90deg, #fff, #fff, #000, #000);
            background-size: 300% 300%;
            background-position: 1% 50%;
            transition: all 1s ease;
            -webkit-transition: background 0.3s ease;
            -moz-transition: background 0.3s ease;
            -o-transition: background 0.3s ease;
            outline: none;
            cursor: pointer;
        }

        input:hover {
            color: #fff;
            background-position: 99% 50%;
        }
    </style>
</head>
<body>

<input type="button" value="button">



</body>
</html>

这个是利用background-position属性的变化实现的渐变效果



还可以通过box-shadow属性来实现这种动画效果,只是颜色不会有一个平滑的过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font: 14px/1.5 Arial;
            box-sizing: border-box;
        }

        .btn {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-transform: uppercase;
            width: 200px;
            height: 40px;
            text-decoration: none;
            color: #fff;
            text-align: center;
            line-height: 40px;
            border: 1px solid #d91222;
            -moz-box-shadow: 200px 0 #d91222 inset; /*通过正负值调整变化方向*/
            box-shadow: 200px 0 #d91222 inset;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .btn:hover {
            box-shadow: 0 0 #d91222 inset;
            color: #d91222;
        }
    </style>
</head>
<body>

<div><a href="javascript:void(0)" class="btn">Hover me</a></div>

</body>
</html>


目录
相关文章
|
2月前
边框虚线滚动动画特效
边框虚线滚动动画特效
|
2月前
水波纹按钮动画
水波纹按钮动画
17 0
水波纹按钮动画
|
前端开发 IDE 开发工具
「趣学前端」为什么有的页面背景颜色是渐变的
用技术实现梦想,用梦想打开创意之门。为了给不懂技术的朋友讲解日常开发中怎么实现网页的效果,我准备出一个系列。
115 1
侧边自定义滚动条
在线演示 本地下载
922 0
CSS3鼠标滑过图片3D旋转动画
在线演示       本地下载
1061 0
|
前端开发 容器
切图技巧分享—圆角背景色
原文:切图技巧分享—圆角背景色 一、设计稿 要实现下面这样一个效果,本文重点说的是下面“自动续费,可随时取消”这部分的实现。 我把问题简化一下,变成了 二、解决问题的思路 1、p标签加背景色 一般,很容易想到用p标签实现,代码如下: .
1203 0