css来实现一个好玩的按钮

2024-07-29 16:30:30 浏览数 (2)

效果展示

实现思路:

定义好一个按钮
然后定义一个伪元素:after相同大小的盒子采用的父相子绝定位
默认初始伪元素的盒子的宽的Width:0%; 盒子的颜色为随便填写就行,别跟过渡之后的一样就行
当给button添加hover的时候伪元素的盒子的宽度改为父级的100%,颜色改为其他颜色即可
因为需要动画过渡效果,我们再给伪元素添加一个transition: all 0.8s;属性,令元素属性过渡更加丝滑

注意: 因为伪元素的层级在button上面,会盖住字体,所以我们要设置伪元素的层级z-index: -999;

代码语言：javascript复制

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
        }

        button {
            position: relative;
            width: 150px;
            height: 50px;
            font-size: 20px;
            background-color: transparent;
            border-radius: 10px;
            cursor: pointer;
        }

        button:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: orange;
            z-index: -999;
            transition: all 0.8s;
            border-radius: 10px;
        }

        button:hover:after {
            width: 100%;
            background: #3b8d99;
        }
    </style>
</head>

<body>
    <button>
        <span>Hover Me</span>
    </button>

</body>

</html>

button width 动画 css background

0 人点赞