CSS：实现流光按钮类

最新推荐文章于 2025-06-20 10:00:22 发布

原创最新推荐文章于 2025-06-20 10:00:22 发布 · 787 阅读

3 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

28 篇文章

订阅专栏

运行效果

在这里插入图片描述

知识点

利用linear-gradient为标签增加背景渐变色
通过animation增加动画
CSS3 filter(滤镜)
给元素增加ambi-light-button类名即可实现居中流光按钮

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        a{
            text-decoration: none;
        }
        .ambi-light-button{
            position:absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 40px;
            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
            background-size: 400%;
            width: 400px;
            height: 100px;
            color: #fff;
            text-align: center;
            line-height: 100px;
            text-transform: uppercase; 
            border-radius: 50px;
            z-index: 0;
        }
        .ambi-light-button::before{
            content: "";
            position: absolute;
            left: -5px;
            right: -5px;
            top: -5px;
            bottom: -5px;
            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
            background-size: 400%;
            border-radius: 50px;
            filter:blur(20px);
            z-index: -1;
        }
        .ambi-light-button:hover{
            animation: ambi 3s linear infinite;
        }
        .ambi-light-button:hover::before{
            animation: ambi 3s linear infinite;
        }
        @keyframes ambi {
            100%{
                background-position: -400% 0;
            }
        }

    </style>
</head>
<body>
    <a href="javascript:;" class="ambi-light-button">I love 老慧</a>
</body>
</html>