<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果</title>
<link rel="stylesheet" href="./style.css">
<style>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #111;
}
button{
margin: 30px;
}
.btn {
position: relative;
padding: 1rem 3rem;
font-family: "微软雅黑", sans-serif;
font-size: 1.5rem;
font-weight:700;
line-height: 1.5;
color: black;
text-decoration: none;
text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3);
background-color: white;
border: transparent;
outline: transparent;
cursor: pointer;
user-select: none;
white-space: nowrap;
animation: glow 8s linear infinite;
}
.btn-gradient {
color: white;
background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
background-size: 300%;
border-radius: 2em;
}
.btn-gradient::before {
position: absolute;
content: "";
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
z-index: -1;
background: inherit;
background-size: inherit;
border-radius: 4em;
opacity: 0;
transition: 0.5s;
}
.btn-gradient:hover{
coloer:#ececec;
}
.btn-gradient:hover::before {
opacity: 1;
filter: blur(20px);
animation: glow 8s linear infinite;
}
@keyframes glow {
to {
background-position: 300%;
}
}
.golden{
color: #504227;
background-image: linear-gradient(to right, #fff89b, #997744, #fff89b, #997744, #fff89b);
}
.shine{
background-image: linear-gradient(to right, red, gold, lightgreen, gold, red);
}
.black{
background-image: linear-gradient(to right, #252525,#393e40,#4f4f4f,#6d6d6d, #252525);
}
</style>
</head>
<body>
<button class="btn btn-gradient">我是一个华丽的按钮</button>
<button class="btn btn-gradient golden">我是一个奢华的按钮</button>
<button class="btn btn-gradient shine">我是一个热情的按钮</button>
<button class="btn btn-gradient black">我是一个沉稳的按钮</button>
</body>
</html>
