1.3K views
1.main { 2 align-items: center; 3 justify-content: center; 4 transform: translate(0%,25%); 5} 6 7button { 8 width: 13em; 9 height: 3.5em; 10 border: none; 11 display: flex; 12 align-items: center; 13 background-color: #171717; 14 border-radius: 15px; 15 padding-left: 1em; 16 z-index: 3; 17 overflow: hidden; 18 transition: .4s ease-in-out; 19} 20 21.text { 22 color: white; 23 padding-left: 0.5em; 24 padding-top: 0.1em; 25 letter-spacing: 0.8em; 26 transition: .4s ease-in-out; 27 z-index: 3; 28 font-weight: bold; 29} 30 31.planet { 32 position: relative; 33 margin-left: -9.55em; 34 left: 2.6em; 35 scale: 4; 36 transition: .4s ease-in-out; 37} 38 39.img { 40 margin-left: -7.25em; 41 margin-top: 6.3em; 42 transition: .4s ease-in-out; 43 z-index: -2; 44} 45 46.img .stars { 47 margin-right: -0.8em; 48 margin-top: 7em; 49 scale: 0.85; 50 opacity: 0; 51 transition: .4s ease-in-out; 52} 53 54.img .astronaut { 55 position: relative; 56 top: -6.2em; 57 left: .65em; 58} 59 60.satalite { 61 position: relative; 62 left: -1em; 63 top: -3em; 64 animation: 4s around infinite; 65 transition: .4s ease-in-out; 66} 67 68@keyframes around { 69 0% { 70 z-index: 5; 71 transform: translateY(-3.5em) translateX(8.5em); 72 } 73 74 50% { 75 transform: translateX(1em) translateY(3.5em); 76 } 77 78 100% { 79 transform: translateY(-3.5em) translateX(8.5em); 80 z-index: -2; 81 } 82} 83 84button:hover .img { 85 margin-top: -1em; 86 z-index: 4; 87} 88 89button:hover .text { 90 opacity: 0; 91} 92 93button:hover .planet { 94 opacity: 0; 95} 96 97button:hover + .satalite { 98 opacity: 0; 99} 100 101button:active { 102 transform: scale(0.9); 103} 104 105button:active .stars { 106 opacity: 1; 107}
Praashoo7
Prashant
MIT License