CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
以下是一个使用纯CSS实现的炫酷多彩按钮特效的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Buttons</title>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
position: absolute;
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
animation: animateGradient 2s linear infinite;
transition: all 0.5s;
}
.button:hover {
background-color: #556270;
}
.button:hover span {
width: 100%;
}
@keyframes animateGradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style>
</head>
<body>
<button class="button"><span>Click Me</span></button>
</body>
</html>这段代码展示了如何使用CSS创建一个带有炫酷渐变动画的按钮。当鼠标悬停在按钮上时，按钮背景色会变暗，同时内部的span元素会展开，产生一种光晕的视觉效果。这个示例也展示了CSS动画和CSS过渡的应用，以及如何通过HTML结构的简单修改来增加视觉效果。
评论已关闭