炫彩流光按钮

最新推荐文章于 2024-09-06 09:38:49 发布

星河！

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量121

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45398972/article/details/131621159

版权

该文章介绍了如何使用CSS来实现一个具有炫彩流光效果的按钮。通过在button元素上应用before和after伪元素，结合线性渐变、模糊滤镜、背景尺寸动画以及CSS的hover和active伪类，创造出动态的悬停和按下效果，使得按钮在交互时展现出色彩流动的视觉效果。

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

超酷炫彩流光 button 按钮

实现效果：

炫彩流光按钮

这是一个普通的 button

    <button>Button</button>

		button {
            width: 200px;
            height: 50px;
            color: #fff;
            background: #222222;
            position: relative;
            cursor: pointer;
            z-index: 1;
            border-radius: 10px;
        }

添加 before 伪元素，比按钮（四周）多出 4 像素，设置 background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red) 线性渐变，45deg 方向，选择7个颜色，设置 filter: blur(5px) 模糊，放大尺寸 background-size: 1000%，然后添加动画。

        button::before {
            content: '';
            width: 208px;
            height: 58px;
            background: #222222;
            position: absolute;
            top: -4px;
            left: -4px;
            transition: all .35s;
            border-radius: 10px;
            z-index: -1;
            background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, purple, red);/*设置线性渐变*/
            filter: blur(5px);		/*设置模糊*/
            background-size: 1000%;		/*放大尺寸*/
            animation: amSize 40s linear infinite;		/*添加动画*/
        }
        @keyframes amSize {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 1000% 0;
            }
        }

再添加一个伪元素和按钮（样式）一致，隐藏 ::before，最后添加伪类，在鼠标悬停和按下状态显示或隐藏伪元素

        button::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #222222;
            cursor: pointer;
            border-radius: 10px;
            z-index: -1;
        }
        button::before {
            opacity: 0;		/*隐藏 ::before*/
        }
        button:hover::before{
            opacity: 1;		/*悬停*/
        }
        button:active::after{
            opacity: 0;		/*激活（按下）*/
        }