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