#e8e8e8
1.space-button { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 align-items: center; 6 justify-content: space-between; 7 width: 200px; 8 height: 60px; 9 background-color: #293944; 10 background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%); 11 border: none; 12 border-radius: 10px; 13 cursor: pointer; 14 perspective: 1000px; 15 transform: translateY(-3px); 16 overflow: hidden; 17 padding: 0 20px; 18 box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2); 19 transition: transform 0.3s ease-out; 20} 21 22.title { 23 color: wheat; 24 font-weight: bold; 25 margin-right: 10px; 26 font-size: 20px; 27} 28 29.planet { 30 content: ""; 31 position: absolute; 32 width: 15px; 33 height: 15px; 34 top: 10px; 35 left: 10px; 36 background-color: rgb(224, 236, 224); 37 border-radius: 50%; 38 perspective: 1000px; 39 transform-style: preserve-3d; 40 box-shadow: inset rgb(211, 203, 177) -20px -20px 70px; 41} 42 43.planet::before { 44 position: absolute; 45 content: ""; 46 width: 25px; 47 height: 25px; 48 border: solid 6px rgb(187, 173, 173); 49 border-radius: 50%; 50 top: -30%; 51 left: -30%; 52 transform: rotate3d(0.8, 0.2, 0, 75deg); 53 box-sizing: border-box; 54} 55 56.space-button:after { 57 content: ""; 58 position: absolute; 59 bottom: -50%; 60 left: 0; 61 width: 100%; 62 height: 100%; 63 background-color: #688ACC; 64 transform-origin: bottom center; 65 transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); 66 transform: skewY(10deg) scaleY(0); 67 z-index: 2; 68} 69 70.space-button:hover:after { 71 transform-origin: bottom center; 72 transform: skewY(9.3deg) scaleY(2); 73} 74 75.space-button:active { 76 transform: translateY(0); 77 box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2); 78 border: 1px solid rgba(30, 255, 0, 0.171); 79} 80 81.space-button .rocket { 82 display: block; 83 position: absolute; 84 opacity: 0; 85 bottom: 10%; 86 border: 0; 87 height: 40%; 88 transform: translateY(225%) translateX(-50%); 89 transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1); 90 z-index: 3; 91} 92 93.flex { 94 display: flex; 95 flex-direction: row-reverse; 96 align-items: center; 97 justify-content: flex-start; 98 padding: 0 20px; 99 height: 100%; 100 width: 100%; 101} 102 103.space-button:hover .rocket { 104 fill: white; 105 animation: shake_3019 .1s infinite; 106 transform: translateX(-50%) translateY(-100%); 107 opacity: 1; 108 transition: all .9s cubic-bezier(0.48, 0, 0.12, 1); 109} 110 111.space-button:focus .rocket { 112 animation: push_3019 5s ease-in infinite; 113} 114 115@keyframes push_3019 { 116 0% { 117 transform: rotate(-45deg) translateY(0px); 118 } 119 120 33% { 121 transform: translateY(-500px); 122 } 123 124 65% { 125 transform: rotate(180deg); 126 } 127 128 66% { 129 transform: rotate(-45deg) translateY(0px); 130 } 131 132 100% { 133 transform: rotate(-45deg); 134 } 135} 136 137@keyframes shake_3019 { 138 0% { 139 transform: rotate(-45deg) translateX(-1px) translateY(1px); 140 } 141 142 100% { 143 transform: rotate(-45deg) translateX(1px) translateY(-1px); 144 } 145} 146 147 148 149
819 views
819 views
Comments
MIT License