2.7K views
1button { 2 position: relative; 3 padding: 13px 35px; 4 background: #f5ddb7; 5 font-size: 17px; 6 font-weight: 900; 7 color: #181818; 8 border: none; 9 border-radius: 8px; 10 box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0; 11 transition: all .3s ease-in-out; 12} 13 14.icon-1 { 15 position: absolute; 16 top: 10%; 17 left: 50%; 18 transform: translate(-50%, 0); 19 width: 0px; 20 height: auto; 21 transition: all .5s ease-in-out; 22 z-index: -1; 23} 24 25.icon-2 { 26 position: absolute; 27 top: 10%; 28 left: 50%; 29 transform: translate(-50%, 0); 30 width: 0px; 31 height: auto; 32 transition: all .5s ease-in-out; 33 z-index: -2; 34} 35 36.icon-3 { 37 position: absolute; 38 top: 10%; 39 left: 50%; 40 transform: translate(-50%, 0); 41 width: 0px; 42 height: auto; 43 transition: all .5s ease-in-out; 44 z-index: -2; 45} 46 47.icon-4 { 48 position: absolute; 49 top: 10%; 50 left: 50%; 51 transform: translate(-50%, 0); 52 width: 0px; 53 height: auto; 54 transition: all .5s ease-in-out; 55 z-index: -2; 56} 57 58.icon-5 { 59 position: absolute; 60 top: 10%; 61 left: 50%; 62 transform: translate(-50%, 0); 63 width: 0px; 64 height: auto; 65 transition: all .5s ease-in-out; 66 z-index: -2; 67} 68 69button:hover { 70 padding: 13px 25px; 71 border-radius: 8px 8px 24px 24px; 72} 73 74button:hover .icon-1 { 75 top: -250%; 76 left: 50%; 77 transform: translate(-50%, 0); 78 width: 50px; 79 height: auto; 80 animation: inIcon1 1s ease .45s forwards; 81} 82 83@keyframes inIcon1 { 84 0% { 85 transform-origin: 0 100%; 86 transform: translate(-50%, 0) rotate(0deg); 87 } 88 89 25% { 90 transform-origin: 0 100%; 91 transform: translate(-50%, 0) rotate(5deg); 92 } 93 94 50% { 95 transform-origin: 0 100%; 96 transform: translate(-50%, 0) rotate(1deg); 97 } 98 99 65% { 100 transform-origin: 0 100%; 101 transform: translate(-50%, 0) rotate(3deg); 102 } 103 104 100% { 105 transform-origin: 0 100%; 106 transform: translate(-50%, 0) rotate(0deg); 107 } 108} 109 110button:hover .icon-2 { 111 position: absolute; 112 top: -200%; 113 left: 90%; 114 transform: translate(-50%, 0); 115 width: 75px; 116 height: auto; 117 animation: inIcon2 1s ease .45s forwards; 118} 119 120@keyframes inIcon2 { 121 0% { 122 transform-origin: 0 100%; 123 transform: translate(-50%, 0) rotate(0deg); 124 } 125 126 35% { 127 transform-origin: 0 100%; 128 transform: translate(-50%, 0) rotate(10deg); 129 } 130 131 50% { 132 transform-origin: 0 100%; 133 transform: translate(-50%, 0) rotate(4deg); 134 } 135 136 80% { 137 transform-origin: 0 100%; 138 transform: translate(-50%, 0) rotate(5deg); 139 } 140 141 100% { 142 transform-origin: 0 100%; 143 transform: translate(-50%, 0) rotate(0deg); 144 } 145} 146 147button:hover .icon-3 { 148 position: absolute; 149 top: -130%; 150 left: 20%; 151 transform: translate(-50%, 0); 152 width: 60px; 153 height: auto; 154 animation: inIcon3 1s ease .45s forwards; 155} 156 157@keyframes inIcon3 { 158 0% { 159 transform-origin: 0 100%; 160 transform: translate(-50%, 0) rotate(0deg); 161 } 162 163 35% { 164 transform-origin: 0 100%; 165 transform: translate(-50%, 0) rotate(-2deg); 166 } 167 168 100% { 169 transform-origin: 0 100%; 170 transform: translate(-50%, 0) rotate(0deg); 171 } 172} 173 174button:hover .icon-4 { 175 position: absolute; 176 top: -300%; 177 left: 10%; 178 transform: translate(-50%, 0); 179 width: 85px; 180 height: auto; 181 animation: inIcon4 1s ease .45s forwards; 182} 183 184@keyframes inIcon4 { 185 0% { 186 transform-origin: 0 100%; 187 transform: translate(-50%, 0) rotate(0deg); 188 } 189 190 40% { 191 transform-origin: 0 100%; 192 transform: translate(-50%, 0) rotate(-3deg); 193 } 194 195 100% { 196 transform-origin: 0 100%; 197 transform: translate(-50%, 0) rotate(0deg); 198 } 199} 200 201button:hover .icon-5 { 202 position: absolute; 203 top: -350%; 204 left: 90%; 205 transform: translate(-50%, 0); 206 width: 85px; 207 height: auto; 208 animation: inIcon5 1s ease .45s forwards; 209} 210 211@keyframes inIcon5 { 212 0% { 213 transform-origin: 0 100%; 214 transform: translate(-50%, 0) rotate(0deg); 215 } 216 217 35% { 218 transform-origin: 0 100%; 219 transform: translate(-50%, 0) rotate(-3deg); 220 } 221 222 100% { 223 transform-origin: 0 100%; 224 transform: translate(-50%, 0) rotate(0deg); 225 } 226} 227 228.fil-leaf-1 { 229 fill: #7B9B3A 230} 231 232.fil-leaf-2 { 233 fill: #556729; 234 fill-rule: nonzero 235} 236 237.fil-leaf-3 { 238 fill: #556729 239} 240 241.fil-leaf-4 { 242 fill: #3C4819 243} 244 245.fil-leaf-5 { 246 fill: #3C4819 247}
MuhammadHasann
Muhammad Hasan
MIT License