CSSAdd prefixes
1button { 2 background-color: transparent; 3 position: relative; 4 border: none; 5} 6 7button::before { 8 content: "Ready"; 9 animation: .55s cubic-bezier(1,-0.06,.61,.45); 10 color: rgb(87, 78, 78); 11 font-size: 1.3em; 12 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 13 position: absolute; 14 top: 0; 15 bottom: 0; 16 left: 0; 17 right: 0; 18 transform: translateY(43%); 19 z-index: 1; 20} 21 22/* COLORS */ 23 24#tip > path { 25 fill: #5b5eb3; 26} 27 28#rocket-body > path { 29 fill: #cccac6; 30 stroke: #cccac6 31} 32 33#wings > path { 34 fill: #cccac6; 35 stroke: #cccac6 36} 37 38#rocket-body-bottom > path, 39#rocket-body-bottom > polygon { 40 fill: #514737; 41 stroke: #514737; 42} 43 44#flames :nth-child(2n+1) { 45 fill: red; 46} 47 48#flames :nth-child(2n) { 49 fill: yellow; 50} 51 52/* SMOKE */ 53 54#smoke > span { 55 position: absolute; 56 left: 0; 57 height: 16px; 58 width: 16px; 59 border-radius: 100%; 60 background-color: gray; 61 top: 50%; 62 z-index: -1; 63 animation: .5s linear infinite; 64 display: none; 65} 66 67#smoke :nth-child(1) { 68 top: 40%; 69 animation-name: smoke-1; 70 animation-delay: 3ms; 71 animation-duration: 1s; 72} 73 74#smoke :nth-child(2) { 75 top: 45%; 76 animation-name: smoke-2; 77 animation-duration: 1.3s; 78} 79 80#smoke :nth-child(3) { 81 top: 42%; 82 animation-name: smoke-3; 83 animation-delay: 3ms; 84 animation-duration: 1.6s; 85} 86 87#smoke :nth-child(4) { 88 top: 43%; 89 animation-name: smoke-1; 90 animation-duration: .7s; 91} 92 93#smoke :nth-child(5) { 94 top: 46%; 95 animation-name: smoke-2; 96 animation-delay: 3ms; 97 animation-duration: 1s; 98} 99 100#smoke :nth-child(6) { 101 top: 48%; 102 animation-name: smoke-3; 103 animation-duration: 1.2s; 104} 105 106/* SET ANIMATIONS */ 107 108#rocket { 109 animation: .55s cubic-bezier(1,-0.06,.61,.45); 110 height: 150px; 111 transform: translateX(-20px) rotateZ(45deg); 112} 113 114svg #flames > path { 115 animation: 1.2s linear infinite forwards; 116 transform-origin: center center; 117 animation-play-state: paused; 118 opacity: 0; 119} 120 121svg #wings-top { 122 animation: .6s linear forwards; 123 animation-name: close-wing-top; 124} 125 126svg #wings-bottom { 127 animation: .6s linear forwards; 128 animation-name: close-wing-bottom; 129} 130 131/* HOVER */ 132 133button:hover::before { 134 content: "Set"; 135} 136 137button:hover #wings-top, 138button:focus #wings-top { 139 animation-name: open-wing-top; 140} 141 142button:hover #wings-bottom, 143button:focus #wings-bottom { 144 animation-name: open-wing-bottom; 145} 146 147button:hover #smoke > span { 148 display: block; 149} 150 151/* FOCUS */ 152 153button:focus::before { 154 content: "Go!"; 155 animation-name: launch-text; 156} 157 158button:focus #rocket { 159 animation-name: launch_149; 160} 161 162button:focus #flames > path { 163 animation-name: flames; 164 animation-play-state: running; 165} 166 167button:focus #smoke > span { 168 display: none; 169} 170 171/* ANIMATIONS KEYFRAMES */ 172 173@keyframes launch_149 { 174 from { 175 transform: translateX(-20px) rotateZ(45deg); 176 } 177 178 to { 179 transform: translateX(2000px) rotateZ(45deg); 180 } 181} 182 183@keyframes launch-text { 184 from { 185 transform: translateY(43%); 186 } 187 188 to { 189 transform: translateY(43%) translateX(2000px); 190 } 191} 192 193@keyframes open-wing-top { 194 from { 195 transform: translateY(-100px); 196 } 197 198 to { 199 transform: translateY(0px); 200 } 201} 202 203@keyframes open-wing-bottom { 204 from { 205 transform: translateX(100px); 206 } 207 208 to { 209 transform: translateX(0px); 210 } 211} 212 213@keyframes close-wing-top { 214 from { 215 transform: translateY(0px); 216 } 217 218 to { 219 transform: translateY(-100px); 220 } 221} 222 223@keyframes close-wing-bottom { 224 from { 225 transform: translateX(0px); 226 } 227 228 to { 229 transform: translateX(100px); 230 } 231} 232 233@keyframes flames { 234 0% { 235 transform: scale(1); 236 opacity: 1; 237 } 238 239 30% { 240 transform: scale(.89); 241 } 242 243 50% { 244 transform: scale(.95); 245 } 246 247 70% { 248 transform: scale(.9); 249 } 250 251 100% { 252 transform: scale(1); 253 opacity: 1; 254 } 255} 256 257@keyframes smoke-1 { 258 0% { 259 opacity: .3; 260 transform: translate(0, 0); 261 } 262 263 60% { 264 opacity: .3; 265 transform: translate(-15px, -10px); 266 } 267 268 100% { 269 opacity: .1; 270 transform: translate(-25px, 5px); 271 } 272} 273 274@keyframes smoke-2 { 275 0% { 276 opacity: .3; 277 transform: translate(0, 0); 278 } 279 280 60% { 281 opacity: .3; 282 transform: translate(-10px, -3px); 283 } 284 285 100% { 286 opacity: .1; 287 transform: translate(-30px, 9px); 288 } 289} 290 291@keyframes smoke-3 { 292 0% { 293 opacity: .3; 294 transform: translate(0, 0); 295 } 296 297 60% { 298 opacity: .3; 299 transform: translate(-5px, 5px); 300 } 301 302 100% { 303 opacity: .1; 304 transform: translate(-20px, -5px); 305 } 306}
HTML
1<button> 2 <svg id="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 416.449 416.449" xml:space="preserve"> 3 <g id="tip"> 4 <path d="M399.76,16.699c10.12,37.84,8.67,78.13-4.34,115.28h-0.01L284.48,21.049v-0.01 C321.63,8.029,361.92,6.579,399.76,16.699z"></path> 5 </g> 6 <g id="rocket-body"> 7 <path d="M90.21,207.929l87.14-101.42h0.01l33.71-39.24c21.43-21.43,46.6-36.84,73.41-46.23v0.01 l110.93,110.93h0.01c-9.39,26.81-24.8,51.98-46.23,73.41l-39.24,33.71l-101.43,87.14l-29.57-29.57l-29.58-29.58l-29.58-29.58z"></path> 8 </g> 9 <g id="wings"> 10 <path id="wings-top" d="M309.95,239.099c1.74,45.6-14.8,91.78-49.61,126.59c-10.69,10.68-22.44,19.65-34.93,26.89 l-16.89-66.34L309.95,239.099z"></path> 11 <path id="wings-bottom" d="M177.35,106.509l-87.14,101.42l-66.33-16.88c7.24-12.49,16.21-24.24,26.89-34.93 C85.58,121.309,131.74,104.769,177.35,106.509z"></path> 12 </g> 13 <g id="rocket-body-bottom"> 14 <path d="M208.52,326.239l-39.94,14.71c-10.98,4.05-23.31,1.34-31.58-6.94l-6.85-6.85l48.8-30.49 L208.52,326.239z"></path> 15 <polygon points="178.95,296.669 130.15,327.159 130.14,327.159 109.72,306.739 149.37,267.089"></polygon> 16 <polygon points="149.37,267.089 109.72,306.739 89.3,286.309 119.79,237.509"></polygon> 17 <path d="M119.79,237.509l-30.49,48.8l-6.86-6.85c-8.27-8.28-10.98-20.6-6.94-31.58l14.71-39.95 L119.79,237.509z"></path> 18 </g> 19 <g id="flames"> 20 <path d="M28.88,339.459c-2.559,0-5.119-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143 l20.54-20.54c3.905-3.904,10.237-3.904,14.143,0c3.905,3.905,3.905,10.237,0,14.143l-20.54,20.54 C33.999,338.482,31.44,339.459,28.88,339.459z"></path> 21 <path d="M10,416.439c-2.56,0-5.119-0.977-7.072-2.93c-3.905-3.905-3.904-10.237,0.001-14.142l68.47-68.46 c3.905-3.904,10.237-3.904,14.142,0.001c3.905,3.905,3.904,10.237-0.002,14.142l-68.47,68.46 C15.118,415.463,12.559,416.439,10,416.439z"></path> 22 <path d="M73.29,411.259c-2.56,0-5.118-0.977-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.143 l34.23-34.229c3.905-3.904,10.237-3.903,14.142,0c3.905,3.905,3.905,10.237,0,14.143l-34.23,34.229 C78.409,410.282,75.849,411.259,73.29,411.259z"></path> 23 </g> 24 </svg> 25 26 <div id="smoke"> 27 <span></span> 28 <span></span> 29 <span></span> 30 <span></span> 31 <span></span> 32 <span></span> 33 </div> 34</button>
