彩虹按钮（盗版按钮，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>
