html流光按钮

出处bilibili猫咪爱狗

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {/*内容居中，背景色*/
                height: 100vh;
                display: flex;
                justify-content: center;           
                align-items: center;
                background-color: #000;
            }
            a { /*水平垂直居中*/
                position: relative;
                display: inline-block;
                width: 200px;
                height: 60px;
                background-color: skyblue;
                color: #fff;
                line-height: 60px;
                text-align: center;
                /*渐变背景*/
                text-decoration: none;
                background: linear-gradient(90deg,
                    #03a9f4,
                    #f441a5,
                    #ffeb3b,
                    #03a9f4
                );
                /*圆角*/
                background-size: 400%;
                border-radius: 10px;
            }
            /*渐变动画*/
            @keyframes animate {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 400% 0;
                }
            }
            /*鼠标悬停展示*/
            a:hover {
                animation: animate 8s linear infinite;
            }
            a:hover:before {
                filter: blur(20px);
                opacity: 1;
            }
            /*光影盒子*/
            a:before {
                content: '';
                position: absolute;
                left: -5px;
                top: -5px;
                right: -5px;
                bottom: -5px;
                z-index: -1;
                background: linear-gradient(90deg,
                #03a9f4,
                #f441a5,
                #ffeb3b,
                #03a9f4);
                background-size: 400%;
                border-radius: 10px;
                opacity: 0;
                transition: all 1s;
            }
        </style>
    </head>
    <body>
        <a href="#">Button</a>
    </body>
</html>