纯HTML和css写一个流光按钮

一个简单的前端效果，由HTML和css组成

演示视频：

流光按钮

html：

<a class="Illusions" href="javascript:;">sunbutton</a>

a标签也可以用其他的标签代替，比如button和input

*{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        .Illusions{
            text-decoration: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 24px;
            background: linear-gradient(90deg,#03a9f4,#f44aa5,#ffeb3b,#03a9f4);
            background-size: 400%;
            width: 400px;
            height: 100px;
            color: #fff;
            line-height: 100px;
            text-align: center;
            /* 字母大写 */
            text-transform: uppercase;
            border-radius: 50px;
            z-index: -1;
        }
        /* 发光边框 */
        .Illusions::before{
            content: "";
            position: absolute;
            left: -5px;
            right: -5px;
            top: -5px;
            bottom: -5px;
            background: linear-gradient(90deg,#03a9f4,#f44aa5,#ffeb3b,#03a9f4);
            background-size: 400%;
            border-radius: 50px;
            filter: blur(20px);
            z-index: -1;
        }
        .Illusions:hover::before{
            animation: sun 3s infinite linear;
        }
        .Illusions:hover{
            animation: sun 3s infinite linear;
        }

        @keyframes sun {
            100%{
                background-position: -400% 0;
            }
        }

    /* ————————————————
版权声明：本文为CSDN博主「麻辣香锅腊肠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 */