1.butonTxt { 2 position: absolute; 3 width: 100%; 4 height: 100%; 5 display: flex; 6 margin-left: 27px; 7 margin-top: 3px; 8 align-items: center; 9 font-family: "Courier New", Courier, monospace; 10 letter-spacing: 1px; 11 font-weight: bold; 12 text-transform: uppercase; 13 z-index: 2; 14 color: rgb(42, 8, 73); 15 font-size: 30px; 16} 17 18.space-button { 19 position: relative; 20 width: 200px; 21 height: 80px; 22 border-radius: 25px; 23 border: 2px solid rgb(103, 20, 180); 24 background-color: blueviolet; 25 overflow: hidden; 26 background-image: radial-gradient( 27 circle at 80% 2rem, 28 rgb(192, 154, 228) 0%, 29 rgb(103, 20, 180) 100% 30 ); 31 transition: background-image 1s ease-in-out; 32} 33 34.estrella { 35 position: absolute; 36 border-radius: 50%; 37 background: radial-gradient( 38 closest-side, 39 rgba(224, 224, 5, 0.678), 40 transparent 41 ); 42 animation: brillar 8s ease-in-out infinite; 43 border: none; 44 z-index: 0; 45} 46 47.sol { 48 position: absolute; 49 top: 10px; 50 left: 10px; 51 width: 10px; 52 opacity: 0.4; 53 transform: scale(1); 54 transform-origin: center center; 55 transition: transform 0.5s ease; 56 z-index: 1; 57} 58/* ANIMACIONES */ 59@keyframes girar { 60 from { 61 transform: rotate(0deg); 62 } 63 64 to { 65 transform: rotate(360deg); 66 } 67} 68 69@keyframes brillar { 70 0% { 71 background: radial-gradient( 72 closest-side, 73 rgba(224, 224, 5, 0.678), 74 transparent 75 ); 76 box-shadow: outset 0 0 11px 0 rgba(224, 224, 5, 0.678); 77 } 78 79 10% { 80 box-shadow: 0 0 11px 3px rgb(255, 255, 0, 0.678); 81 } 82 83 20% { 84 background: radial-gradient( 85 closest-side, 86 rgba(224, 224, 5, 0.678), 87 transparent 88 ); 89 box-shadow: none; 90 } 91} 92 93.space-button:hover { 94 cursor: pointer; 95 border: 2px solid #fff; 96} 97 98.space-button:hover .estrella { 99 animation: brillar 2s ease-in-out infinite; 100} 101 102.space-button:hover .butonTxt { 103 color: #fff; 104 font-size: 40px; 105} 106 107.space-button .butonTxt { 108 transition: font-size 1s ease-in-out; 109} 110 111/* giramos la luna */ 112.space-button .luna svg { 113 animation: girar 15s linear infinite; 114} 115 116.space-button:hover .luna svg { 117 animation: girar 5s linear infinite; 118} 119 120.space-button:active .luna svg { 121 animation: girar 3s linear infinite; 122} 123 124/**/ 125 126.space-button:active { 127 border: 2px solid rgb(42, 8, 73); 128 background-image: radial-gradient( 129 circle at 80% 2rem, 130 rgb(192, 154, 228) 0%, 131 #fff 100% 132 ); 133 transition: background-image 2s ease-in-out; 134} 135 136.space-button:active .sol { 137 opacity: 1; 138 transform: scale(20); 139} 140 141.luna { 142 display: flex; 143 justify-content: end; 144} 145 146.luna svg { 147 position: relative; 148 width: 50%; 149 margin-top: 10px; 150 right: -50px; 151 opacity: 0.5; 152 transform: translate(0%, 0%); 153 transform-origin: center center; 154} 155
pminedev
pmine_dev
MIT License