Button by gustavofusco
#e8e8e8
1.button { 2 position: relative; 3 z-index: 0; 4 width: 240px; 5 height: 56px; 6 text-decoration: none; 7 font-size: 14px; 8 font-weight: bold; 9 color: #00135C; 10 letter-spacing: 2px; 11 transition: all .3s ease; 12 border: none; 13 background: transparent; 14} 15 16.button__text { 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 width: 100%; 21 height: 100%; 22} 23 24.button::before, 25.button::after, 26.button__text::before, 27.button__text::before { 28 content: ''; 29 position: absolute; 30 height: 3px; 31 border-radius: 2px; 32 background: #00135C; 33 transition: all .5s ease; 34} 35 36.button::before { 37 top: 0; 38 left: 54px; 39 width: calc(100% - 56px * 2 - 16px); 40} 41 42.button::after { 43 top: 0; 44 right: 54px; 45 width: 8px; 46} 47 48.button__text::before { 49 bottom: 0; 50 right: 54px; 51 width: calc(100% - 56px * 2 - 16px); 52} 53 54.button__text::after { 55 top: 0; 56 right: 54px; 57 width: 8px; 58} 59 60.button__line { 61 position: absolute; 62 top: 0; 63 width: 56px; 64 height: 100%; 65 overflow: hidden; 66} 67 68.button__line::before { 69 content: ''; 70 position: absolute; 71 top: 0; 72 width: 150%; 73 height: 100%; 74 box-sizing: border-box; 75 border-radius: 300px; 76 border: #00135C; 77} 78 79.button__line:nth-child(1), 80.button__line:nth-child(1)::before { 81 left: 0; 82} 83 84.button__line:nth-child(2), 85.button__line:nth-child(2)::before { 86 right: 0; 87} 88 89.button:hover { 90 letter-spacing: 6px; 91} 92 93.button:hover::before, 94.button:hover .button__text::before { 95 width: 8px; 96} 97 98.button:hover::after, 99.button:hover .button__text::after { 100 width: calc(100% - 56px * 2 - 16px); 101} 102 103.button__drow1, 104.button__drow2 { 105 position: absolute; 106 z-index: -1; 107 border: 1rem; 108 transform-origin: 1rem 1rem; 109} 110 111.button__drow1 { 112 top: -1rem; 113 left: 40px; 114 width: 2rem; 115 height: 0; 116 transform: rotate(30deg); 117} 118 119.button__drow2 { 120 top: 44px; 121 left: 77px; 122 width: 2rem; 123 height: 0; 124 transform: rotate(-127deg); 125} 126 127.button__drow1::before, 128.button__drow1::after, 129.button__drow2::before, 130.button__drow2::after { 131 content: ''; 132 position: absolute; 133} 134 135.button__drow1::before { 136 bottom: 0; 137 left: 0; 138 width: 0; 139 height: 2rem; 140 border-radius: 1rem; 141 transform-origin: 1rem 1rem; 142 transform: rotate(-60deg); 143} 144 145.button__drow1::after { 146 top: -10px; 147 left: 45px; 148 width: 0; 149 height: 2rem; 150 border-radius: 1rem; 151 transform-origin: 1rem 1rem; 152 transform: rotate(-69deg); 153} 154 155.button__drow2::before { 156 bottom: 0; 157 left: 0; 158 width: 0; 159 height: 2rem; 160 border-radius: 1rem; 161 transform-origin: 1rem 1rem; 162 transform: rotate(-146deg); 163} 164 165.button__drow1::after { 166 bottom: 26px; 167 left: -40px; 168 width: 0; 169 height: 2rem; 170 border-radius: 1rem; 171 transform-origin: 1rem 1rem; 172 transform: rotate(-262deg); 173} 174 175.button__drow1, 176.button__drow1::before, 177.button__drow1::after, 178.button__drow2, 179.button__drow2::before, 180.button__drow2::after { 181 background: dodgerblue; 182} 183 184.button:hover .button__drow1 { 185 animation: drow1 ease-in .06s; 186 animation-fill-mode: forwards; 187} 188 189.button:hover .button__drow1::before { 190 animation: drow2 linear .08s .06s; 191 animation-fill-mode: forwards; 192} 193 194.button:hover .button__drow1::after { 195 animation: drow3 linear .03s .14s; 196 animation-fill-mode: forwards; 197} 198 199.button:hover .button__drow2 { 200 animation: drow4 linear .06s .2s; 201 animation-fill-mode: forwards; 202} 203 204.button:hover .button__drow2::before { 205 animation: drow3 linear .03s .26s; 206 animation-fill-mode: forwards; 207} 208 209.button:hover .button__drow2::after { 210 animation: drow5 linear .06s .32s; 211 animation-fill-mode: forwards; 212} 213 214@keyframes drow1 { 215 0% { 216 height: 0; 217 } 218 219 100% { 220 height: 100px; 221 } 222} 223 224@keyframes drow2 { 225 0% { 226 width: 0; 227 opacity: 0; 228 } 229 230 10% { 231 opacity: 0; 232 } 233 234 11% { 235 opacity: 1; 236 } 237 238 100% { 239 height: 120px; 240 } 241} 242 243@keyframes drow3 { 244 0% { 245 height: 0; 246 } 247 248 100% { 249 height: 80px; 250 } 251} 252 253@keyframes drow4 { 254 0% { 255 height: 0; 256 } 257 258 100% { 259 height: 120px; 260 } 261} 262 263@keyframes drow5 { 264 0% { 265 height: 0; 266 } 267 268 100% { 269 height: 124px; 270 } 271} 272 273.container { 274 width: 100%; 275 height: 300px; 276 display: flex; 277 flex-direction: column; 278 justify-content: center; 279 align-items: center; 280} 281 282 283 284
1K views
1K views
MIT License