CSSAdd prefixes
1.space-button { 2 font-size: 1.2rem; 3 font-weight: bold; 4 text-transform: uppercase; 5 border: none; 6 border-radius: 5px; 7 padding: 10px 20px; 8 transition: all 0.3s ease; 9 display: flex; 10 align-items: center; 11} 12 13.space-icon { 14 margin-right: 10px; 15 fill: currentColor; 16} 17 18/* Light Mode */ 19@media (prefers-color-scheme: light) { 20 .space-button { 21 background-color: #0074D9; 22 color: #fff; 23 box-shadow: 0px 0px 10px 0px #0074D9; 24 } 25 26 .space-button:hover { 27 box-shadow: 0px 0px 20px 0px #fff; 28 } 29 30 .space-button:active { 31 box-shadow: none; 32 background-color: #001f3f; 33 } 34} 35 36/* Dark Mode */ 37@media (prefers-color-scheme: dark) { 38 .space-button { 39 background-color: #f0f0f0; 40 color: #000; 41 box-shadow: 0px 0px 10px 0px #000; 42 } 43 44 .space-button:hover { 45 box-shadow: 0px 0px 20px 0px #fff; 46 } 47 48 .space-button:active { 49 box-shadow: none; 50 background-color: #bbb; 51 } 52} 53
HTML
1<button class="space-button"> 2 <svg class="space-icon" viewBox="0 0 24 24" width="16" height="16"> 3 <path fill="currentColor" d="M12 0c-1.2 0-2.2 1-2.2 2.2v3.3c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1V2.2C7.6 1 6.7 0 5.5 0S3.4 1 3.4 2.2v3.3c0 .6-.5 1.1-1.1 1.1S1.1 6.1 1.1 5.5V2.2C1.1 1 0 2 0 3.2 0 16.3 7.7 24 20.8 24 23 24 24 23 24 20.8c0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2s-2.2 1-2.2 2.2c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-2.1 1.7-3.8 3.8-3.8s3.8 1.7 3.8 3.8c0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-1.2-1-2.2-2.2-2.2z"></path> 4 </svg> 5 Launch 6</button> 7
