CSS3按钮闪亮特效让按钮看起来更有活力,增强用户的点击欲望。下面是一些示例代码:
.btn {
background-color: #40E0D0;
color: #fff;
font-size: 1rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 3px;
position: relative;
overflow: hidden;
}
.btn:after {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
opacity: 0;
top: -50%;
left: -50%;
transform: scale(0);
transition: all 0.6s ease-out;
}
.btn:hover:after {
opacity: 1;
transform: scale(2);
}这段代码会在按钮被鼠标悬停时在按钮的中心显示一个半透明的圆形遮罩层,并在动画结束时还原,从而形成闪亮特效。通过调整颜色和样式,您可以轻松地将这种按钮特效应用于您的网站。