1.space-button { 2 display: inline-block; 3 padding: 10px 20px; 4 font-size: 1.2rem; 5 text-transform: uppercase; 6 color: #fff; 7 background-color: #2d3142; 8 border-radius: 5px; 9 border: none; 10 text-decoration: none; 11 transition: all 0.3s ease; 12 position: relative; 13} 14 15.space-button:hover { 16 background-color: #454b5d; 17 transform: translateY(-3px); 18 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 19} 20 21.space-button:active { 22 background-color: #1e222f; 23 transform: translateY(-1px); 24 box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 25} 26 27.space-button svg { 28 display: inline-block; 29 margin-right: 10px; 30 width: 20px; 31 height: 20px; 32 fill: #fff; 33 filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); 34 transform: translateZ(0); 35 transition: all 0.3s ease; 36} 37 38.space-button:hover svg { 39 transform: translateZ(10px) rotateY(180deg) rotateX(180deg); 40} 41 42.space-button:active svg { 43 transform: translateZ(5px) rotateY(180deg) rotateX(180deg); 44} 45
MIT License