菜鸟笔记彩虹按钮（盗版按钮，B站仿写，略有不同！）
链接
<html>
<head>
<title>
demo
</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.btn-container{
position: relative;
overflow: hidden;
box-shadow: 0 1.5px 7.5px 0.5px gray;
z-index: 2;
}
.btn{
position: relative;
background-color: transparent;
padding: 20px 40px;
font-size: 2rem;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans unicode', Geneva, Verdana, sans-serif;
border: none;
transition: 1s;
color: black;
}
.strip-1,.strip-2,.strip-3,.strip-4,.strip-5,.strip-6,.strip-7{
height: 250px;
width: 35px;
z-index: -1;
position: absolute;
}
.strip-1{
transition: 1s;
background-color: violet;
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.strip-2{
transition: 1s;
background-color: rgb(0, 255, 76);
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.strip-3{
transition: 1s;
background-color: blue;
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.strip-4{
transition: 1s;
background-color: green;
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.strip-5{
transition: 1s;
background-color: rgb(194, 236, 5);
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.strip-6{
transition: 1s;
background-color: orange;
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.strip-7{
transition: 1s;
background-color: rgb(226, 12, 112);
transform: translate(-50px,-50px) rotate(-45deg) ;
}
.btn:hover{
color: white;
cursor: pointer;
}
.btn::before{
content: "";
background-color: black;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0;
transition: 1s;
}
.btn:hover::before{
opacity: 0.25;
}
.btn-container:hover .strip-1{
transform: translate(30px,-50px) rotate(-45deg);
}
.btn-container:hover .strip-2{
transform: translate(70px,-50px) rotate(-45deg);
}
.btn-container:hover .strip-3{
transform: translate(110px,-50px) rotate(-45deg);
}
.btn-container:hover .strip-4{
transform: translate(150px,-50px) rotate(-45deg);
}
.btn-container:hover .strip-5{
transform: translate(190px,-50px) rotate(-45deg);
}
.btn-container:hover .strip-6{
transform: translate(230px,-50px) rotate(-45deg);
}
.btn-container:hover .strip-7{
transform: translate(270px,-50px) rotate(-45deg);
}
</style>
</head>
<body>
<div class="btn-container">
<span class="strip-1"></span>
<span class="strip-2"></span>
<span class="strip-3"></span>
<span class="strip-4"></span>
<span class="strip-5"></span>
<span class="strip-6"></span>
<span class="strip-7"></span>
<button class="btn">Hover Me</button>
</div>
</body>
</html>