1button#space-btn { 2 width: 200px; 3 height: 60px; 4 position: relative; 5 border: none; 6 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 7 box-shadow: inset 0px 0px 21px #3b2ad5; 8 background: #03001e; 9 cursor: pointer; 10} 11 12button#space-btn:hover { 13 background: linear-gradient(180deg, #3b2ad5 0%,#88007d 60%,#ff0055c4 100%); 14 box-shadow: 0px 5px 10px #03001e,inset 0px 5px 10px #8611d4,inset 0 -5px 10px #ff0055a1; 15} 16 17.btn-container:hover { 18 background: #03001e; 19 box-shadow: 0px -10px 40px #9611d4,0px 5px 10px #00a2ffe3,inset 0px 10px 21px #3b2ad5; 20} 21 22.btn-container { 23 display: flex; 24 justify-content: center; 25 align-items: center; 26 border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; 27 width: 205px; 28 height: 65px; 29 background: linear-gradient(0deg, #88007d 0%,#ff0055c4 100%); 30} 31 32button span { 33 color: white; 34 font-weight: bold; 35 font-size: 20px; 36} 37 38button div.star { 39 opacity: 0; 40 position: absolute; 41 border-radius: 100%; 42 background-color: white; 43 width: 1px; 44 height: 1px; 45} 46 47button:hover .star { 48 opacity: 1; 49} 50 51button .planet { 52 margin-left: -2.5em; 53 opacity: 0; 54 width: 30px; 55 height: 30px; 56 border-radius: 50%; 57 border: none; 58 position: absolute; 59 background: linear-gradient(rgb(255, 0, 0), transparent),linear-gradient(to top left, rgb(255, 0, 212), transparent), linear-gradient(to top right, rgb(251, 255, 0), transparent); 60 background-blend-mode: screen; 61 background-size: 100% 200%; 62 filter: drop-shadow(0px 0px 4px rgb(82, 59, 16)); 63} 64 65button:hover .planet { 66 z-index: 1; 67 opacity: 1; 68 animation: orbita 6s reverse linear infinite; 69} 70 71.planet::after { 72 content: ''; 73 width: 40px; 74 height: 10px; 75 border: 3px solid #813dff; 76 filter: drop-shadow(0px 0px 1px #cf3333); 77 border-width: 0px 3px 3px 3px; 78 position: absolute; 79 top: 50%; 80 left: 50%; 81 transform: translate(-50%, -50%) rotate(15deg); 82 border-radius: 50%; 83} 84 85.planet::before { 86 position: absolute; 87 color: rgb(255, 0, 0); 88 visibility: hidden; 89} 90 91.moon { 92 margin-left: -3rem; 93 position: absolute; 94 width: 30px; 95 height: 30px; 96 background-color: #fff; 97 border-radius: 100%; 98 box-shadow: 0px 0px 10px 5px rgb(146, 146, 140); 99} 100 101.moon::after { 102 position: absolute; 103 content: ''; 104 margin-top: 15%; 105 box-shadow: 0px 0px 10px 3px #333; 106 margin-left: -10%; 107 border-radius: 100%; 108 width: 3px; 109 height: 3px; 110 background-color: rgb(121, 121, 121); 111} 112 113.moon1::after { 114 position: absolute; 115 content: ''; 116 margin-top: 65%; 117 box-shadow: 0px 0px 8px 3px #333; 118 margin-left: -9px; 119 border-radius: 100%; 120 width: 2px; 121 height: 2px; 122 background-color: rgb(121, 121, 121); 123} 124 125.moon::before { 126 position: absolute; 127 content: ''; 128 margin-top: 30%; 129 margin-left: -30%; 130 border-radius: 100%; 131 box-shadow: 0px 0px 8px 1px rgb(3, 3, 3); 132 width: 5px; 133 height: 5px; 134 background-color: rgb(134, 133, 133); 135} 136 137.moon1::before { 138 position: absolute; 139 content: ''; 140 margin-top: 70%; 141 margin-left: 4%; 142 border-radius: 100%; 143 box-shadow: -5px 1px 4px 3px rgb(134, 133, 133); 144 width: 2px; 145 height: 2px; 146 background-color: rgb(134, 133, 133); 147} 148 149button span.moon,span.moon1 { 150 opacity: 0; 151} 152 153button:hover span.moon,span.moon1 { 154 z-index: -1; 155 opacity: 1; 156 animation: orbita 2.7s linear infinite; 157} 158 159@keyframes orbita { 160 0% { 161 transform: rotate(0deg); 162 transform: translateX(90px); 163 } 164 165 100% { 166 rotate: 360deg; 167 transform: translateX(90px); 168 } 169}
wizard503
Jose Duran
MIT License