Button by KitoC
This button was created for CSS Space Challenge
#212121
1button { 2 --black-hole-color-2: rgb(242, 122, 42); 3 --black-hole-color: rgb(230, 148, 93); 4 font-size: 17px; 5 position: relative; 6 background: #212121; 7 padding: 0.5em; 8 border: 2px solid var(--black-hole-color); 9 border-radius: 8px; 10} 11 12button:hover { 13 border: 2px solid var(--black-hole-color-2); 14 animation: alert 1s alternate infinite linear; 15} 16 17.blackhole { 18 padding: 3em; 19 background-color: black; 20 color: var(--black-hole-color); 21 position: absolute; 22 animation: wiggle 3s alternate-reverse infinite linear; 23 top: -1em; 24 left: -8em; 25} 26 27.blackhole, .blackhole::after, .blackhole::before, .blackhole .ring, .blackhole .ring::after { 28 content: ""; 29 border: 2px solid var(--black-hole-color); 30 border-radius: 50%; 31 box-shadow: 0 0 3em, 32 0 0 1em; 33} 34 35.blackhole::after, .blackhole::before { 36 animation: writhe 3s alternate-reverse infinite linear; 37} 38 39.blackhole::before { 40 position: absolute; 41 width: calc(100% + 0.5em); 42 height: calc(100% + 0.5em); 43 top: -9px; 44 left: -7px; 45} 46 47.blackhole::after { 48 position: absolute; 49 width: calc(100% + 8px); 50 height: calc(100% + 8px); 51 top: -6px; 52 left: -5px; 53} 54 55.blackhole .ring, .blackhole .ring::after { 56 content: ""; 57 position: absolute; 58 left: -50%; 59 width: 200%; 60 border-top: none; 61 height: 2em; 62 border-width: 5px; 63 box-shadow: 0px 5px 10px var(--black-hole-color); 64} 65 66.blackhole .ring, .blackhole .ring::after { 67 animation: ring-writhe 3s alternate-reverse infinite linear; 68} 69 70.blackhole .block { 71 position: absolute; 72 z-index: 90; 73 content: ""; 74 background-color: black; 75 top: -20%; 76 left: 25%; 77 width: 50%; 78 height: 10px; 79} 80 81.blackhole .ring::after { 82 width: 110%; 83 left: -8%; 84} 85 86.blackhole .rocket { 87 fill: white; 88 height: 30px; 89 transform: rotate(-140deg); 90 animation: idle 1s alternate-reverse infinite linear; 91} 92 93.blackhole .rocket-path { 94 position: absolute; 95 top: -60px; 96 right: -60px; 97} 98 99button:hover .rocket-path, button:focus .rocket-path { 100 z-index: 100; 101 animation: engine-start 0.2s alternate-reverse infinite linear; 102} 103 104button:focus .rocket-path { 105 animation: descend 1.2s linear forwards, 106 descend-dissapear 0.1s linear forwards; 107 animation-delay: 0s, 1s; 108} 109 110button .text { 111 display: flex; 112 color: white; 113} 114 115@keyframes idle { 116 from { 117 transform: rotate(-130deg); 118 } 119 120 to { 121 transform: rotate(-140deg); 122 } 123} 124 125@keyframes alert { 126 from { 127 box-shadow: 0 0 0 var(--black-hole-color); 128 } 129 130 to { 131 box-shadow: 0 0 8px var(--black-hole-color); 132 } 133} 134 135@keyframes engine-start { 136 from { 137 transform: scale(1); 138 } 139 140 to { 141 transform: scale(1.05); 142 } 143} 144 145@keyframes descend { 146 from { 147 top: -60px; 148 right: -60px; 149 transform: scale(1); 150 } 151 152 to { 153 top: -10px; 154 right: -10px; 155 transform: scale(0.8); 156 } 157} 158 159@keyframes descend-dissapear { 160 from { 161 top: -10px; 162 right: -10px; 163 transform: scale(1); 164 } 165 166 to { 167 top: 20px; 168 right: 20px; 169 transform: scale(0); 170 } 171} 172 173@keyframes writhe { 174 from { 175 box-shadow: -4px -3px 35px var(--black-hole-color-2), 176 -4px -3px 5px; 177 transform: translateX(-1px) scale(1); 178 } 179 180 to { 181 box-shadow: 4px 3px 35px, 182 4px 3px 5px var(--black-hole-color-2); 183 transform: translateX(1px) scale(0.95); 184 } 185} 186 187@keyframes wiggle { 188 from { 189 transform: translateX(-3px); 190 } 191 192 to { 193 transform: translateX(3px); 194 } 195} 196 197@keyframes ring-writhe { 198 from { 199 transform: translateX(-2px) scale(1); 200 box-shadow: -2px 5px 10px var(--black-hole-color); 201 } 202 203 to { 204 box-shadow: 2px 5px 10px var(--black-hole-color-2); 205 transform: translateX(2px) scale(0.95); 206 } 207} 208
1.3K views
1.3K views
MIT License