按钮渐变

最新推荐文章于 2024-05-17 17:57:36 发布

ps笔记

最新推荐文章于 2024-05-17 17:57:36 发布

阅读量100

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/lv_suri/article/details/125806866

版权

这篇博客展示了如何使用CSS实现一个具有流光效果的渐变按钮。通过设置背景为线性渐变，结合`@keyframes`动画和`hover`伪类，实现了按钮在鼠标悬停时背景颜色的平滑过渡。代码中详细定义了按钮的尺寸、边框半径、文本样式等属性，并利用`before`伪元素增加了一个模糊边框效果。

摘要由CSDN通过智能技术生成

<title>流光渐变按钮</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    
    }
    body{
         background-color: #000000; 
    }
    a{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 200px;
        height: 60px;
        text-align: center;
        color:#fff;
        text-decoration: none;
        background: linear-gradient(180deg, #637AFF 100%, #334AC8 100%);
        border-radius: 30px;
        background-size: 400%;
        font-size: 24px;
        text-transform: uppercase;
    } 
    a:hover{
        animation: animate 8s linear infinite;
    }
    @keyframes animation{
        0%{
            background-position: 0%;
        }
        100%{
            background-position: 400%;
        }
    }
    a::before{
        content: '';
        position: absolute;
        top: -5px;
        left:-5px;
        right: -5px;
        bottom: -5px;
        z-index: -1;
        background: linear-gradient(180deg, #637AFF 100%, #334AC8 100%);
        border-radius: 40px;
        background-size: 400%;
        opacity: -1;
        transition: 0.5s;

    }
    a:hover::before{
        filter: blur(20px);
        opacity: 1;


    }