css 发光按钮

CSS 发光按钮，是一种非常常见并且实用的网页设计元素，它能够突显重要的按钮、链接等元素，让网页界面更吸引眼球，更具有美感。接下来我们就来介绍如何使用 CSS 实现发光按钮。

button{
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

button::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    background-color: rgba(255,255,0.5);
    border-radius: 50%;
    z-index: -1;
}

button:hover::before{
    animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse{
    0%{
        width: 0;
        height: 0;
        opacity: 1;
    }
    100%{
        width: 600px;
        height: 600px;
        opacity: 0;
    }
}

css 发光按钮

以上的代码实现了发光按钮的功能，其中使用了伪元素 ::before 来实现按钮的发光效果。此外，我们还定义了一个 keyframes 动画，让按钮可以无限循环闪烁，使用户更加关注。

需要注意的是，按钮的 position 属性必须设置成 relative，而伪元素 ::before 的 position 属性必须设置成 absolute，才能让发光效果产生预期效果。另外，为了增大鼠标的点击面积，我们还将 overflow 属性设置成了 hidden。

最后，想要让页面的按钮更加美观，除了发光效果，还可以通过改变按钮的颜色、大小、圆角等方式，来增加按钮的美感。希望以上内容对大家有所启发，您也可以尝试使用 CSS 发光按钮，给您的网站增加更多的魅力。

相关推荐