Button by rubyreapergaming
#212121
1@import url("s://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap"); 2 3.btn { 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 width: 13rem; 8 overflow: hidden; 9 height: 3rem; 10 background-size: 300% 300%; 11 backdrop-filter: blur(1rem); 12 border-radius: 5rem; 13 transition: 0.5s; 14 animation: gradient_301 5s ease infinite; 15 border: double 4px transparent; 16 background-image: linear-gradient(#161a25, #161a25), 17 linear-gradient( 18 137.48deg, 19 #f5434f 10%, 20 #631e29 45%, 21 #000000 67%, 22 #161a25 87% 23 ); 24 background-origin: border-box; 25 background-clip: content-box, border-box; 26 font-family: "Orbitron", sans-serif; 27} 28 29#container-stars { 30 position: absolute; 31 z-index: -1; 32 width: 100%; 33 height: 100%; 34 overflow: hidden; 35 transition: 0.5s; 36 backdrop-filter: blur(1rem); 37 border-radius: 5rem; 38} 39 40strong { 41 z-index: 2; 42 font-family: "Orbitron", sans-serif; 43 font-size: 12px; 44 letter-spacing: 5px; 45 color: #ffffff; 46 text-shadow: 0 0 4px white; 47} 48 49#glow { 50 position: absolute; 51 display: flex; 52 width: 12rem; 53} 54 55.circle-container { 56 position: relative; 57 width: 100%; 58 height: 100%; 59 animation: orbit 5s linear infinite; 60} 61 62.circle { 63 position: absolute; 64 width: 30px; 65 height: 30px; 66 border-radius: 50%; 67 filter: blur(2rem); 68} 69 70.circle:nth-of-type(1) { 71 background: rgba(245, 67, 79, 0.636); 72 animation: orbit 8s linear infinite; 73} 74 75.circle:nth-of-type(2) { 76 background: rgba(99, 30, 41, 0.704); 77 animation: orbit 10s linear infinite; 78} 79 80.btn:hover #container-stars { 81 z-index: 1; 82 background-color: #161a25; 83} 84 85.btn:hover { 86 transform: scale(1.1); 87} 88 89.btn:active { 90 border: double 4px #631e29; 91 background-origin: border-box; 92 background-clip: content-box, border-box; 93 animation: none; 94} 95 96.btn:active .circle { 97 background: #631e29; 98} 99 100@keyframes orbit { 101 from { 102 transform: rotate(0deg) translateX(100px) rotate(0deg); 103 } 104 to { 105 transform: rotate(360deg) translateX(100px) rotate(-360deg); 106 } 107} 108 109#stars { 110 position: relative; 111 background: transparent; 112 width: 200rem; 113 height: 200rem; 114} 115 116#stars::after { 117 content: ""; 118 position: absolute; 119 top: -10rem; 120 left: -100rem; 121 width: 100%; 122 height: 100%; 123 animation: animStarRotate 90s linear infinite; 124} 125 126#stars::after { 127 background-image: radial-gradient(#ffffff 1px, transparent 1%); 128 background-size: 50px 50px; 129} 130 131#stars::before { 132 content: ""; 133 position: absolute; 134 top: 0; 135 left: -50%; 136 width: 170%; 137 height: 500%; 138 animation: animStar 60s linear infinite; 139} 140 141#stars::before { 142 background-image: radial-gradient(#ffffff 1px, transparent 1%); 143 background-size: 50px 50px; 144 opacity: 0.5; 145} 146 147@keyframes animStar { 148 from { 149 transform: translateY(0); 150 } 151 152 to { 153 transform: translateY(-135rem); 154 } 155} 156 157@keyframes animStarRotate { 158 from { 159 transform: rotate(360deg); 160 } 161 162 to { 163 transform: rotate(0); 164 } 165} 166 167@keyframes gradient_301 { 168 0% { 169 background-position: 0% 50%; 170 } 171 172 50% { 173 background-position: 100% 50%; 174 } 175 176 100% { 177 background-position: 0% 50%; 178 } 179} 180 181@keyframes pulse_3011 { 182 0% { 183 transform: scale(0.75); 184 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); 185 } 186 187 70% { 188 transform: scale(1); 189 box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); 190 } 191 192 100% { 193 transform: scale(0.75); 194 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 195 } 196} 197
249 views
Variation of abutton
MIT License