#212121
1button#space-btn { 2 width: 100%; 3 height: 100%; 4 position: relative; 5 overflow: hidden; 6 border: 0; 7 outline: 0; 8 border-radius: 11px; 9 background: #03001e; 10 background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e); 11 cursor: pointer; 12} 13 14.btn-container { 15 width: 200px; 16 height: 60px; 17 position: relative; 18 overflow: visible; 19} 20 21.btn-container::after { 22 content: ""; 23 width: 100%; 24 height: 100%; 25 position: absolute; 26 left: 0; 27 top: 20px; 28 z-index: -1; 29 background: #03001e; 30 background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e); 31 filter: blur(20px); 32 opacity: 0; 33} 34 35.btn-container:hover { 36 transform: scale(1.1); 37 transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1); 38} 39 40.btn-container:hover:after { 41 transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1); 42 opacity: 0.6; 43} 44 45button span { 46 color: white; 47 font-weight: 700; 48 font-size: 16px; 49} 50 51button#space-btn div.star { 52 width: 1px; 53 height: 1px; 54 background-color: white; 55 border-radius: 50%; 56 animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 57} 58 59button#space-btn div.shooting-star { 60 width: 80px; 61 height: 1px; 62 position: absolute; 63 background: linear-gradient(80deg, #ffffffff, #ffffff00); 64 border-radius: 50%; 65 transform: rotate(-40deg); 66 opacity: 0 67} 68 69button#space-btn div.shooting-star-1 { 70 animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 71} 72 73button#space-btn div.shooting-star-2 { 74 animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 75} 76 77button#space-btn div.shooting-star-3 { 78 animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 79} 80 81button#space-btn div.shooting-star-4 { 82 animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 83} 84 85@keyframes blink { 86 0% { 87 box-shadow: 0 0 10px 0 white; 88 } 89 90 50% { 91 box-shadow: 0 0 10px 2px white; 92 } 93 94 100% { 95 box-shadow: 0 0 10px 0 white; 96 } 97} 98 99@keyframes fallingStar1 { 100 0% { 101 top: -10px; 102 left: 220px; 103 opacity: 1; 104 } 105 106 100% { 107 top: 200px; 108 left: -20px; 109 opacity: 1; 110 } 111} 112 113@keyframes fallingStar2 { 114 0% { 115 top: -10px; 116 left: 150px; 117 opacity: 1; 118 } 119 120 100% { 121 top: 200px; 122 left: -90px; 123 opacity: 1; 124 } 125} 126 127@keyframes fallingStar3 { 128 0% { 129 top: -10px; 130 left: 80px; 131 opacity: 1 132 } 133 134 100% { 135 top: 200px; 136 left: -160px; 137 opacity: 1 138 } 139} 140 141@keyframes fallingStar4 { 142 0% { 143 top: -10px; 144 left: 0px; 145 opacity: 1; 146 } 147 148 100% { 149 top: 200px; 150 left: -240px; 151 opacity: 1; 152 } 153} 154
1.2K views
1.2K views
Comments
MIT License