[分享]css3按钮发光效果

CSS3按钮发光效果是一种简单而炫酷的效果，可以为网站增添华丽的视觉效果。今天我们来学习如何使用CSS3技术实现按钮发光效果。.btn{ padding:10px 30px; backgroundco...

CSS3按钮发光效果是一种简单而炫酷的效果，可以为网站增添华丽的视觉效果。今天我们来学习如何使用CSS3技术实现按钮发光效果。

.btn{
    padding:10px 30px;
    background-color:#fff;
    border:2px solid #0066CC;
    color:#0066CC;
    font-size:20px;
    font-weight:bold;
    border-radius:5px;
    position:relative;
    overflow:hidden;
    transition: all .2s ease-in-out;
}

.btn::before{
    content:';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background-color:#fff;
    opacity:.5;
    border-radius:100%;
    transform:translate(-50%, -50%);
    transition: all .5s ease-in-out;
}

.btn:hover::before{
    width:500px;
    height:500px;
    opacity:0;
} 

首先，我们定义一个按钮的基本样式，包括背景颜色、边框、字体大小等，可以根据自己的需要进行调整。需要注意的是，我们给按钮设置了position:relative，这是为了后续实现按钮发光效果所需。同时，我们还设置了一个::before伪元素，它会在按钮内部生成一个圆形的遮罩层，用于实现按钮发光效果。

接下来，在:hover伪类下，使用CSS3的transition动画效果，使遮罩层的宽度和高度变大，同时透明度变为0，从而实现按钮发光的效果。注意，在:hover::before中，我们设置了transition的持续时间为0.5秒，这是为了让发光效果更加流畅。

通过以上简单的CSS3代码，我们就可以实现一个按钮发光效果。希望本文对大家有所帮助！