按钮 渐变

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


    }