.keycap{position:relative;overflow:hidden;box-shadow:inset -8px 0 8px rgba(0,0,0,.15),inset 0 -8px 8px rgba(0,0,0,.25),0 0 0 2px rgba(0,0,0,.75),10px 20px 25px rgba(0,0,0,.4);-webkit-tap-highlight-color:transparent}.keycap:before{content:"";position:absolute;top:3px;left:4px;bottom:14px;right:12px;background:linear-gradient(90deg,#232323,#4a4a4a);border-radius:10px;box-shadow:-10px -10px 10px hsla(0,0%,100%,.25),10px 5px 10px rgba(0,0,0,.15);border-left:1px solid #0004;border-bottom:1px solid #0004;border-top:1px solid #0009;transition:all .1s ease-in-out;z-index:0}.keycap:hover{transform:translateY(2px);box-shadow:inset -4px 0 4px rgba(0,0,0,.1),inset 0 -4px 4px rgba(0,0,0,.15),0 0 0 2px rgba(0,0,0,.5),5px 10px 15px rgba(110,231,183,.8)}.keycap:hover:before{top:5px;left:5px;bottom:11px;right:11px;box-shadow:-5px -5px 5px hsla(0,0%,100%,.15),5px 3px 5px rgba(0,0,0,.1)}.keycap:hover .letter{transform:translateY(1px)}button{position:relative;padding:12px 35px;background:#1f2937;font-size:17px;font-weight:500;color:#fff;border:1px solid hsla(0,0%,100%,.2);border-radius:8px;box-shadow:0 0 0 #fec1958c;transition:all .3s ease-in-out;cursor:pointer}.star-1{position:absolute;top:20%;left:20%;width:25px;height:auto;filter:drop-shadow(0 0 0 rgba(147,197,253,.7));fill:#6ee7b7;z-index:-5;transition:all 1s cubic-bezier(.05,.83,.43,.96)}.star-2{top:45%;left:45%;width:15px}.star-2,.star-3{position:absolute;height:auto;filter:drop-shadow(0 0 0 rgb(110 231 183));fill:rgba(147,197,253,.7);z-index:-5;transition:all 1s cubic-bezier(0,.4,0,1.01)}.star-3{top:50%;left:50%;width:5px}.star-4{top:20%;left:40%;width:8px;transition:all .8s cubic-bezier(0,.4,0,1.01)}.star-4,.star-5{position:absolute;height:auto;filter:drop-shadow(0 0 0 rgb(110 231 183));z-index:-5;fill:aqua}.star-5{top:25%;left:45%;width:15px;transition:all .6s cubic-bezier(0,.4,0,1.01)}.star-6{position:absolute;top:5%;left:50%;width:5px;height:auto;filter:drop-shadow(0 0 0 rgb(110 231 183));fill:aqua;z-index:-5;transition:all .8s ease}button:hover{background:rgba(31,41,55,.8);color:#fff;box-shadow:0 0 25px #41a7dd}button:active{scale:.95;box-shadow:0 0 25px #38bdf8}button:hover .star-1{top:-80%;left:-30%;width:25px}button:hover .star-1,button:hover .star-2{position:absolute;height:auto;filter:drop-shadow(0 0 10px rgb(110 231 183));z-index:2}button:hover .star-2{top:-25%;left:10%;width:15px}button:hover .star-3{top:75%;left:25%;width:10px}button:hover .star-3,button:hover .star-4{position:absolute;height:auto;filter:drop-shadow(0 0 10px rgb(110 231 183));z-index:2}button:hover .star-4{top:30%;left:80%;width:8px}button:hover .star-5{top:25%;left:115%;width:15px}button:hover .star-5,button:hover .star-6{position:absolute;height:auto;filter:drop-shadow(0 0 10px rgb(110 231 183));z-index:2}button:hover .star-6{top:5%;left:60%;width:5px}