css实现按钮悬停效果

最新推荐文章于 2024-07-25 15:44:34 发布

码小虎

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量552

点赞数 2

本文链接：https://blog.csdn.net/qq_43105939/article/details/121303076

版权

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container{
            width: 480px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .container a{
            position: relative;
            display: inline-block;
            padding: 10px 30px;
            margin: 20px;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 12px;
            color:#fff;
            transition: 0.5s;
        }
        .container a:nth-of-type(1){
            background-image:linear-gradient(90deg,rgb(79, 161, 167),rgb(80, 145, 230),rgb(168, 243, 30));
            background-size: 200%;
        }
        .container a:nth-of-type(2){
            background-image:linear-gradient(90deg,rgb(210, 245, 53),rgb(80, 225, 230),rgb(243, 30, 190));
            background-size: 200%;
        }
        .container a:nth-of-type(3){
            background-image:linear-gradient(90deg,rgb(248, 226, 167),rgb(140, 230, 80),rgb(30, 80, 243));
            background-size: 200%;
        }
        .container a:nth-of-type(4){
            background-image:linear-gradient(90deg,rgb(151, 165, 196),rgb(231, 220, 154),rgb(168, 243, 30));
            background-size: 200%;
        }
        .container a:nth-of-type(5){
            background-image:linear-gradient(90deg,rgb(167, 166, 79),rgb(135, 230, 80),rgb(30, 243, 126));
            background-size: 200%;
        }
        .container a:nth-of-type(6){
            background-image:linear-gradient(90deg,rgb(181, 152, 194),rgb(80, 145, 230),rgb(221, 253, 161));
            background-size: 200%;
        }
        .container a:hover{
            background-position-x: 100%;
            transform: translateY(-15px);
        }
        .container a::after{
            content: '';
            position: absolute;
            top:0;
            left:0;
            width: 50%;
            height: 100%;
            background:rgba(255, 255, 255, 0.2)

        }
        .container a::before{
            content: "111";
            position: absolute;
            bottom: 0;
            left: 5%;
            width: 90%;
            height: 4px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.2);
            filter: blur(5px);
            transform: scale(1);
            transition: 0.2s;
            /* z-index: -1; */
            
        }
        .container a:hover:before{
            transform:scale(1);
            bottom: -15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#">Button</a>
        <a href="#">Button</a>
        <a href="#">Button</a>
        <a href="#">Button</a>
        <a href="#">Button</a>
        <a href="#">Button</a>
    </div>
</body>
</html>

码小虎

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现按钮悬停效果

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫