1.btn { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 width: 13rem; 6 height: 3rem; 7 background-size: 300% 300%; 8 backdrop-filter: blur(1rem); 9 border-radius: 5rem; 10 transition: 0.5s; 11 animation: gradient_301 5s ease infinite; 12 border: double 4px transparent; 13 background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%); 14 background-origin: border-box; 15 background-clip: content-box, border-box; 16} 17 18#container-stars { 19 position: fixed; 20 z-index: -1; 21 width: 100%; 22 height: 100%; 23 overflow: hidden; 24 transition: 0.5s; 25 backdrop-filter: blur(1rem); 26 border-radius: 5rem; 27} 28 29strong { 30 z-index: 2; 31 font-family: 'Avalors Personal Use'; 32 font-size: 12px; 33 letter-spacing: 5px; 34 color: #FFFFFF; 35 text-shadow: 0 0 4px white; 36} 37 38#glow { 39 position: absolute; 40 display: flex; 41 width: 12rem; 42} 43 44.circle { 45 width: 100%; 46 height: 30px; 47 filter: blur(2rem); 48 animation: pulse_3011 4s infinite; 49 z-index: -1; 50} 51 52.circle:nth-of-type(1) { 53 background: rgba(254, 83, 186, 0.636); 54} 55 56.circle:nth-of-type(2) { 57 background: rgba(142, 81, 234, 0.704); 58} 59 60.btn:hover #container-stars { 61 z-index: 1; 62 background-color: #212121; 63} 64 65.btn:hover { 66 transform: scale(1.1) 67} 68 69.btn:active { 70 border: double 4px #FE53BB; 71 background-origin: border-box; 72 background-clip: content-box, border-box; 73 animation: none; 74} 75 76.btn:active .circle { 77 background: #FE53BB; 78} 79 80#stars { 81 position: relative; 82 background: transparent; 83 width: 200rem; 84 height: 200rem; 85} 86 87#stars::after { 88 content: ""; 89 position: absolute; 90 top: -10rem; 91 left: -100rem; 92 width: 100%; 93 height: 100%; 94 animation: animStarRotate 90s linear infinite; 95} 96 97#stars::after { 98 background-image: radial-gradient(#ffffff 1px, transparent 1%); 99 background-size: 50px 50px; 100} 101 102#stars::before { 103 content: ""; 104 position: absolute; 105 top: 0; 106 left: -50%; 107 width: 170%; 108 height: 500%; 109 animation: animStar 60s linear infinite; 110} 111 112#stars::before { 113 background-image: radial-gradient(#ffffff 1px, transparent 1%); 114 background-size: 50px 50px; 115 opacity: 0.5; 116} 117 118@keyframes animStar { 119 from { 120 transform: translateY(0); 121 } 122 123 to { 124 transform: translateY(-135rem); 125 } 126} 127 128@keyframes animStarRotate { 129 from { 130 transform: rotate(360deg); 131 } 132 133 to { 134 transform: rotate(0); 135 } 136} 137 138@keyframes gradient_301 { 139 0% { 140 background-position: 0% 50%; 141 } 142 143 50% { 144 background-position: 100% 50%; 145 } 146 147 100% { 148 background-position: 0% 50%; 149 } 150} 151 152@keyframes pulse_3011 { 153 0% { 154 transform: scale(0.75); 155 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); 156 } 157 158 70% { 159 transform: scale(1); 160 box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); 161 } 162 163 100% { 164 transform: scale(0.75); 165 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 166 } 167}
MIT License