Button by Sameer2244
#e8e8e8
1.button { 2 width: 6rem; 3 height: 6rem; 4 background-color: #da6b34; 5 border-radius: 0; 6 box-shadow: 5px 5px 0px black; 7 transform: translate(0,0); 8 z-index: 1; 9 padding: 0; 10 position: relative; 11} 12 13.coin { 14 position: absolute; 15 z-index: -2; 16 top: 50%; 17 transform: translate(0,-20px); 18 right: 45%; 19} 20 21.mario { 22 position: absolute; 23 z-index: 1; 24 top: 50%; 25 transform: translate(15px,200px); 26 right: 45%; 27} 28 29.button:active ~ .mario { 30 animation: jump2 0.6s ease-in-out; 31} 32 33.button:active { 34 transform: translate(0,-15px); 35} 36 37.button:active ~ .coin { 38 animation: jump 1s; 39} 40 41.button:hover { 42 animation: animate 1s infinite; 43} 44 45.button-icon { 46 position: relative; 47 top: 25%; 48 left: 63%; 49 z-index: 1; 50 transform: scale(1.5); 51} 52 53.overlay { 54 position: absolute; 55 width: 6rem; 56 height: 6rem; 57 background-color: #FFC07B; 58} 59 60.one { 61 position: absolute; 62 background-color: #DE5917; 63 box-shadow: 2px 2px 0px black; 64 width: 1rem; 65 height: 0.35rem; 66 z-index: 10; 67} 68 69.one:after { 70 content: ""; 71 position: absolute; 72 background-color: #DE5917; 73 box-shadow: 2px 2px 0px black; 74 width: 0.5rem; 75 height: 0.5rem; 76 transform: translate(5px,15px); 77 z-index: 10; 78} 79 80.one:before { 81 content: ""; 82 position: absolute; 83 background-color: #DE5917; 84 box-shadow: 2px 2px 0px black; 85 width: 0.5rem; 86 height: 0.5rem; 87 transform: translate(5px,25px); 88 z-index: 10; 89} 90 91.two { 92 position: absolute; 93 background-color: #DE5917; 94 box-shadow: 2px 2px 0px black; 95 width: 0.5rem; 96 height: 0.5rem; 97 transform: translate(-50%,50%); 98 z-index: 10; 99} 100 101.two::after { 102 content: ""; 103 position: absolute; 104 background-color: #DE5917; 105 box-shadow: 2px 2px 0px black; 106 width: 0.5rem; 107 height: 0.8rem; 108 transform: translate(190%,-5%); 109 z-index: 10; 110} 111 112.two::before { 113 content: ""; 114 position: absolute; 115 background-color: #DE5917; 116 width: 0.7rem; 117 height: 0.3rem; 118 transform: translate(12px,8px); 119 z-index: 10; 120} 121 122.dots { 123 position: absolute; 124 width: 5px; 125 height: 5px; 126 transform: translate(-20px,-12px); 127 background-color: #000; 128} 129 130.dots::after { 131 content: ""; 132 position: absolute; 133 width: 5px; 134 height: 5px; 135 transform: translate(50px,0px); 136 background-color: #000; 137} 138 139.dots2 { 140 position: absolute; 141 width: 5px; 142 height: 5px; 143 transform: translate(-20px,40px); 144 background-color: #000; 145} 146 147.dots2::after { 148 content: ""; 149 position: absolute; 150 width: 5px; 151 height: 5px; 152 transform: translate(50px,0px); 153 background-color: #000; 154} 155 156@keyframes animate { 157 0% { 158 background-color: #FFC07B; 159 } 160 161 75% { 162 background-color: #DE5917; 163 } 164 165 100% { 166 background-color: #da6b34; 167 } 168} 169 170@keyframes jump { 171 0% { 172 transform: translate(0,-15px) rotateY(0deg); 173 } 174 175 50% { 176 transform: translate(0,-200px) rotateY(180deg); 177 } 178 179 75% { 180 transform: translate(0,-15px) rotateY(270deg); 181 } 182 183 100% { 184 transform: translate(0,-15px) rotateY(360deg); 185 } 186} 187 188.button-container p { 189 color: black; 190 text-align: center; 191 transform: translate(0,1rem); 192 font-weight: bold; 193 z-index: -2; 194} 195 196@keyframes jump2 { 197 0% { 198 transform: translate(20px,200px); 199 } 200 201 50% { 202 transform: translate(20px,25px); 203 } 204 205 100% { 206 transform: translate(20px,200px); 207 } 208}
2.6K views
2.6K views
MIT License