├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── css └── base.css ├── favicon.ico └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.cache 3 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Button Hover Styles 2 | 3 | Some ideas for button hover animations using CSS only. 4 | 5 | ![Image](https://tympanus.net/codrops/wp-content/uploads/2021/02/buttonstyles.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=53413) 8 | 9 | [Demo](http://tympanus.net/Development/ButtonHoverStyles/) 10 | 11 | 12 | ## Misc 13 | 14 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 15 | 16 | ## License 17 | [MIT](LICENSE) 18 | 19 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 18px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #111; 14 | --color-number: #999; 15 | --color-bg: #fff; 16 | --color-link: #1352d1; 17 | --color-link-hover: #111; 18 | color: var(--color-text); 19 | background-color: var(--color-bg); 20 | font-family: tenon, sans-serif; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | /* Page Loader */ 26 | .js .loading::before, 27 | .js .loading::after { 28 | content: ''; 29 | position: fixed; 30 | z-index: 1000; 31 | } 32 | 33 | .js .loading::before { 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | background: var(--color-bg); 39 | } 40 | 41 | .js .loading::after { 42 | top: 50%; 43 | left: 50%; 44 | width: 60px; 45 | height: 60px; 46 | margin: -30px 0 0 -30px; 47 | border-radius: 50%; 48 | opacity: 0.4; 49 | background: var(--color-link); 50 | animation: loaderAnim 0.7s linear infinite alternate forwards; 51 | } 52 | 53 | @keyframes loaderAnim { 54 | to { 55 | opacity: 1; 56 | transform: scale3d(0.5, 0.5, 1); 57 | } 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | color: var(--color-link); 63 | outline: none; 64 | } 65 | 66 | a:hover { 67 | color: var(--color-link-hover); 68 | outline: none; 69 | } 70 | 71 | /* https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 72 | a:focus, 73 | button:focus { 74 | /* Provide a fallback style for browsers 75 | that don't support :focus-visible */ 76 | outline: none; 77 | } 78 | 79 | a:focus:not(:focus-visible), 80 | button:focus:not(:focus-visible) { 81 | /* Remove the focus indicator on mouse-focus for browsers 82 | that do support :focus-visible */ 83 | } 84 | 85 | a:focus-visible, 86 | button:focus-visible { 87 | /* Draw a very noticeable focus style for 88 | keyboard-focus on browsers that do support 89 | :focus-visible */ 90 | outline: 2px solid #443ffc; 91 | outline-offset: 3px; 92 | } 93 | 94 | a:focus-visible { 95 | background: none; 96 | } 97 | 98 | .frame { 99 | padding: 3rem 5vw 6rem; 100 | text-align: center; 101 | position: relative; 102 | z-index: 1000; 103 | } 104 | 105 | .frame__title { 106 | font-size: 1.525rem; 107 | margin: 0 0 1rem; 108 | font-weight: normal; 109 | cursor: default; 110 | } 111 | 112 | .frame__tagline { 113 | color: #999; 114 | max-width: 320px; 115 | margin: 1rem auto; 116 | } 117 | 118 | .frame__related h3 { 119 | margin: 0; 120 | padding-top: 1rem; 121 | font-size: 1rem; 122 | } 123 | 124 | .frame__related p { 125 | margin: 0.5rem 0; 126 | } 127 | 128 | .frame__links { 129 | display: flex; 130 | align-items: center; 131 | justify-content: center; 132 | } 133 | 134 | .frame__links a:not(:last-child) { 135 | margin-right: 2rem; 136 | } 137 | 138 | .github { 139 | width: 24px; 140 | height: 24px; 141 | } 142 | 143 | .related { 144 | text-align: center; 145 | padding: 4rem 1rem; 146 | min-height: 40vh; 147 | } 148 | 149 | .content { 150 | display: grid; 151 | width: 100%; 152 | margin: 0 auto; 153 | padding: 10vh 25px; 154 | max-width: 1300px; 155 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 156 | grid-auto-rows: 200px; 157 | grid-gap: 4rem; 158 | grid-row-gap: 6rem; 159 | justify-content: center; 160 | list-style: none; 161 | } 162 | 163 | .content__item { 164 | width: 100%; 165 | height: 100%; 166 | margin: 0; 167 | padding: 0; 168 | counter-increment: itemcounter; 169 | display: flex; 170 | flex-direction: column; 171 | align-items: center; 172 | justify-content: center; 173 | position: relative; 174 | z-index: 1; 175 | pointer-events: none; 176 | } 177 | 178 | .content__item::before { 179 | color: var(--color-number); 180 | position: absolute; 181 | top: 0; 182 | left: 0; 183 | content: counters(itemcounter, ".", decimal-leading-zero); 184 | } 185 | 186 | .button { 187 | pointer-events: auto; 188 | cursor: pointer; 189 | background: #e7e7e7; 190 | border: none; 191 | padding: 1.5rem 3rem; 192 | margin: 0; 193 | font-family: inherit; 194 | font-size: inherit; 195 | position: relative; 196 | display: inline-block; 197 | } 198 | 199 | .button::before, 200 | .button::after { 201 | position: absolute; 202 | top: 0; 203 | left: 0; 204 | width: 100%; 205 | height: 100%; 206 | } 207 | 208 | .button--pan { 209 | font-family: aktiv-grotesk-extended, sans-serif; 210 | font-weight: 700; 211 | border: 2px solid #000; 212 | border-radius: 3rem; 213 | overflow: hidden; 214 | color: #fff; 215 | } 216 | 217 | .button--pan span { 218 | position: relative; 219 | mix-blend-mode: difference; 220 | } 221 | 222 | .button--pan::before { 223 | content: ''; 224 | background: #000; 225 | transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); 226 | } 227 | 228 | .button--pan:hover::before { 229 | transform: translate3d(0,-100%,0); 230 | } 231 | 232 | .button--hyperion { 233 | font-family: input-mono-narrow, monospace; 234 | font-weight: 500; 235 | padding: 1rem 1.5rem; 236 | border: 1px solid #000; 237 | overflow: hidden; 238 | color: #fff; 239 | } 240 | 241 | .button--hyperion span { 242 | display: block; 243 | position: relative; 244 | } 245 | 246 | .button--hyperion > span { 247 | overflow: hidden; 248 | } 249 | 250 | .button--hyperion > span > span { 251 | overflow: hidden; 252 | mix-blend-mode: difference; 253 | } 254 | 255 | .button--hyperion:hover > span > span { 256 | animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s; 257 | } 258 | 259 | @keyframes MoveUpInitial { 260 | to { 261 | transform: translate3d(0,-105%,0); 262 | } 263 | } 264 | 265 | @keyframes MoveUpEnd { 266 | from { 267 | transform: translate3d(0,100%,0); 268 | } 269 | to { 270 | transform: translate3d(0,0,0); 271 | } 272 | } 273 | 274 | .button--hyperion::before { 275 | content: ''; 276 | background: #000; 277 | transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); 278 | transform-origin: 100% 50%; 279 | } 280 | 281 | .button--hyperion:hover::before { 282 | transform: scale3d(0,1,1); 283 | transform-origin: 0% 50%; 284 | } 285 | 286 | .button--mimas { 287 | text-transform: uppercase; 288 | letter-spacing: 0.05rem; 289 | font-weight: 700; 290 | font-size: 0.85rem; 291 | border-radius: 0.5rem; 292 | overflow: hidden; 293 | color: #fff; 294 | background: #e7e7e7; 295 | } 296 | 297 | .button--mimas span { 298 | position: relative; 299 | mix-blend-mode: difference; 300 | } 301 | 302 | .button--mimas::before { 303 | content: ''; 304 | background: #000; 305 | width: 120%; 306 | left: -10%; 307 | transform: skew(30deg); 308 | transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); 309 | } 310 | 311 | .button--mimas:hover::before { 312 | transform: translate3d(100%,0,0); 313 | } 314 | 315 | .button--atlas { 316 | font-family: signo, sans-serif; 317 | font-weight: 500; 318 | } 319 | 320 | .button--atlas > span { 321 | display: inline-block; 322 | } 323 | 324 | .button--atlas:hover > span { 325 | opacity: 0; 326 | } 327 | 328 | .marquee { 329 | position: absolute; 330 | top: 0; 331 | left: 0; 332 | width: 100%; 333 | overflow: hidden; 334 | pointer-events: none; 335 | } 336 | 337 | .marquee__inner { 338 | width: fit-content; 339 | display: flex; 340 | position: relative; 341 | --offset: 1rem; 342 | --move-initial: calc(-25% + var(--offset)); 343 | --move-final: calc(-50% + var(--offset)); 344 | transform: translate3d(var(--move-initial), 0, 0); 345 | animation: marquee 1s linear infinite; 346 | animation-play-state: paused; 347 | opacity: 0; 348 | } 349 | 350 | .button--atlas:hover .marquee__inner { 351 | animation-play-state: running; 352 | opacity: 1; 353 | transition-duration: 0.4s; 354 | } 355 | 356 | .marquee span { 357 | text-align: center; 358 | white-space: nowrap; 359 | font-style: italic; 360 | padding: 1.5rem 0.5rem; 361 | } 362 | 363 | @keyframes marquee { 364 | 0% { 365 | transform: translate3d(var(--move-initial), 0, 0); 366 | } 367 | 368 | 100% { 369 | transform: translate3d(var(--move-final), 0, 0); 370 | } 371 | } 372 | 373 | .button--kari { 374 | font-family: freight-display-pro, serif; 375 | font-weight: 900; 376 | font-size: 1.25rem; 377 | border-radius: 50%; 378 | border: 2px solid #000; 379 | } 380 | 381 | .button--kari > span { 382 | display: inline-block; 383 | transition: opacity 0.1s; 384 | } 385 | 386 | .button--kari:hover > span { 387 | opacity: 0; 388 | } 389 | 390 | .button--kari .marquee { 391 | transform: rotate(-2.75deg); 392 | } 393 | 394 | .button--kari:hover .marquee__inner { 395 | animation-play-state: running; 396 | opacity: 1; 397 | transition-duration: 0.6s; 398 | } 399 | 400 | .button--pandora { 401 | background: #000; 402 | font-weight: 700; 403 | padding: 0; 404 | border-radius: 5px; 405 | } 406 | 407 | .button--pandora span { 408 | display: block; 409 | background: #a7a7a7; 410 | padding: 1.5rem 2rem; 411 | border: 1px solid #000; 412 | border-radius: 5px; 413 | transform: translate3d(-4px, -4px, 0); 414 | transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); 415 | } 416 | 417 | .button--pandora:hover span { 418 | transform: translate3d(-8px, -8px, 0); 419 | } 420 | 421 | .button--janus { 422 | font-family: freight-display-pro, serif; 423 | font-weight: 900; 424 | width: 175px; 425 | height: 120px; 426 | color: #fff; 427 | background: none; 428 | } 429 | 430 | .button--janus::before { 431 | content: ''; 432 | background: #e6e6e6; 433 | -webkit-clip-path: path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z"); 434 | clip-path: path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z"); 435 | transition: clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), -webkit-clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), background 0.5s ease; 436 | } 437 | 438 | .button--janus:hover::before { 439 | background: #000; 440 | -webkit-clip-path: path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z"); 441 | clip-path: path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z"); 442 | } 443 | 444 | .button--janus::after { 445 | content: ''; 446 | height: 86%; 447 | width: 97%; 448 | top: 5%; 449 | border-radius: 58% 42% 55% 45% / 56% 45% 55% 44%; 450 | border: 1px solid #000; 451 | transform: rotate(-20deg); 452 | z-index: -1; 453 | transition: transform 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55); 454 | } 455 | 456 | .button--janus:hover::after { 457 | transform: translate3d(0,-5px,0); 458 | } 459 | 460 | .button--janus span { 461 | display: block; 462 | transition: transform 0.3s ease; 463 | mix-blend-mode: difference; 464 | } 465 | 466 | .button--janus:hover span { 467 | transform: translate3d(0,-10px,0); 468 | } 469 | 470 | .button--anthe { 471 | font-family: bely-display, sans-serif; 472 | color: #fff; 473 | background: none; 474 | } 475 | 476 | .button--anthe::before { 477 | content: ''; 478 | background: #000; 479 | -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%); 480 | clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%); 481 | transition: clip-path 0.4s cubic-bezier(0.2, 1, 0.8, 1), -webkit-clip-path 0.4s cubic-bezier(0.2, 1, 0.8, 1); 482 | } 483 | 484 | .button--anthe:hover::before { 485 | background: #000; 486 | -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); 487 | clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); 488 | } 489 | 490 | .button--anthe span { 491 | display: block; 492 | mix-blend-mode: difference; 493 | transition: transform 0.4s cubic-bezier(0.2, 1, 0.8, 1); 494 | } 495 | 496 | .button--anthe:hover span { 497 | transform: translate3d(-10px,0,0); 498 | } 499 | 500 | .button--pallene { 501 | font-family: aktiv-grotesk-extended, sans-serif; 502 | font-weight: 700; 503 | border-radius: 0.5rem; 504 | border: 2px solid #000; 505 | box-shadow: inset 0 0 0 0px #000; 506 | transition: border-radius 0.3s, box-shadow 0.3s, color 0.3s; 507 | transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); 508 | } 509 | 510 | .button--pallene:hover { 511 | color: #e7e7e7; 512 | border-radius: 50%; 513 | box-shadow: inset 0 0 0 40px #000; 514 | transition-delay: 0s, 0s, 0.2s; 515 | } 516 | 517 | .button--telesto { 518 | overflow: hidden; 519 | font-family: obvia, sans-serif; 520 | font-weight: 800; 521 | font-style: italic; 522 | font-size: 1.15rem; 523 | color: #fff; 524 | } 525 | 526 | .button--telesto span { 527 | display: block; 528 | position: relative; 529 | z-index: 1; 530 | } 531 | 532 | .button--telesto > span { 533 | overflow: hidden; 534 | mix-blend-mode: difference; 535 | } 536 | 537 | .button--telesto:hover > span > span { 538 | animation: MoveRightInitial 0.1s forwards, MoveRightEnd 0.3s forwards 0.2s; 539 | } 540 | 541 | @keyframes MoveRightInitial { 542 | to { 543 | transform: translate3d(105%,0,0); 544 | } 545 | } 546 | 547 | @keyframes MoveRightEnd { 548 | from { 549 | transform: translate3d(-100%,0,0); 550 | } 551 | to { 552 | transform: translate3d(0,0,0); 553 | } 554 | } 555 | 556 | .button--telesto::before, 557 | .button--telesto::after { 558 | content: ''; 559 | background: #000; 560 | } 561 | 562 | .button--telesto::before { 563 | width: 135%; 564 | -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); 565 | clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); 566 | transform: translate3d(-100%,0,0); 567 | } 568 | 569 | .button--telesto:hover::before { 570 | transform: translate3d(0,0,0); 571 | transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); 572 | } 573 | 574 | .button--telesto::after { 575 | width: 105%; 576 | transform: translate3d(100%,0,0); 577 | transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); 578 | } 579 | 580 | .button--telesto:hover::after { 581 | transform: translate3d(0,0,0); 582 | transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1); 583 | } 584 | 585 | .button--calypso { 586 | overflow: hidden; 587 | font-family: freight-display-pro, serif; 588 | font-size: 1.15rem; 589 | border-radius: 0.85rem; 590 | color: #fff; 591 | } 592 | 593 | .button--calypso span { 594 | display: block; 595 | position: relative; 596 | mix-blend-mode: difference; 597 | z-index: 10; 598 | } 599 | 600 | .button--calypso:hover span { 601 | animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s; 602 | } 603 | 604 | @keyframes MoveScaleUpInitial { 605 | to { 606 | transform: translate3d(0,-105%,0) scale3d(1,2,1); 607 | opacity: 0; 608 | } 609 | } 610 | 611 | @keyframes MoveScaleUpEnd { 612 | from { 613 | transform: translate3d(0,100%,0) scale3d(1,2,1); 614 | opacity: 0; 615 | } 616 | to { 617 | transform: translate3d(0,0,0); 618 | opacity: 1; 619 | } 620 | } 621 | 622 | .button--calypso::before { 623 | content: ''; 624 | background: #000; 625 | width: 120%; 626 | height: 0; 627 | padding-bottom: 120%; 628 | top: -110%; 629 | left: -10%; 630 | border-radius: 50%; 631 | transform: translate3d(0,68%,0) scale3d(0,0,0); 632 | } 633 | 634 | .button--calypso:hover::before { 635 | transform: translate3d(0,0,0) scale3d(1,1,1); 636 | transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); 637 | } 638 | 639 | .button--calypso::after { 640 | content: ''; 641 | background: #000; 642 | transform: translate3d(0,-100%,0); 643 | transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); 644 | } 645 | 646 | .button--calypso:hover::after { 647 | transform: translate3d(0,0,0); 648 | transition-duration: 0.05s; 649 | transition-delay: 0.4s; 650 | transition-timing-function: linear; 651 | } 652 | 653 | .button--skoll { 654 | overflow: hidden; 655 | border-radius: 50%; 656 | color: #fff; 657 | width: 100px; 658 | height: 100px; 659 | padding: 0; 660 | font-weight: 500; 661 | } 662 | 663 | .button--skoll span { 664 | display: block; 665 | position: relative; 666 | } 667 | 668 | .button--skoll > span { 669 | overflow: hidden; 670 | mix-blend-mode: difference; 671 | } 672 | 673 | .button--skoll:hover > span > span { 674 | animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s; 675 | } 676 | 677 | .button--skoll::before { 678 | content: ''; 679 | background: #000; 680 | width: 100%; 681 | height: 0; 682 | padding-bottom: 100%; 683 | border-radius: 50%; 684 | transform: translate3d(0,0,0); 685 | transition: transform 0.3s; 686 | transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); 687 | } 688 | 689 | .button--skoll:hover::before { 690 | transform: translate3d(0,100%,0); 691 | } 692 | 693 | .button--greip { 694 | overflow: hidden; 695 | color: #fff; 696 | font-family: input-mono-narrow, monospace; 697 | font-weight: 500; 698 | padding: 1rem 2rem; 699 | } 700 | 701 | .button--greip span { 702 | display: block; 703 | position: relative; 704 | } 705 | 706 | .button--greip > span { 707 | overflow: hidden; 708 | mix-blend-mode: difference; 709 | } 710 | 711 | .button--greip:hover > span > span { 712 | animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s; 713 | } 714 | 715 | .button--greip::before { 716 | content: ''; 717 | background: #000; 718 | width: 100%; 719 | height: 100%; 720 | transform-origin: 50% 100%; 721 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 722 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 723 | transition: clip-path 0.2s, -webkit-clip-path 0.2s; 724 | transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); 725 | } 726 | 727 | .button--greip:hover::before { 728 | transition-duration: 0.3s; 729 | -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%); 730 | clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%); 731 | } 732 | 733 | .button--dione { 734 | background: none; 735 | font-family: obvia, sans-serif; 736 | font-weight: 500; 737 | font-style: italic; 738 | padding: 1.5rem 3rem; 739 | } 740 | 741 | .button--dione span { 742 | display: inline-block; 743 | position: relative; 744 | color: #fff; 745 | } 746 | 747 | .button--dione::before { 748 | content: ''; 749 | background: #000; 750 | transition: transform 0.3s cubic-bezier(0.2,1,0.7,1); 751 | } 752 | 753 | .button--dione:hover::before { 754 | transform: scale3d(0.9, 0.8, 1); 755 | } 756 | 757 | .button--dione::after { 758 | content: ''; 759 | border: 1px solid #000; 760 | transition: transform 0.3s cubic-bezier(0.2,1,0.7,1); 761 | border-radius: 0px; 762 | transform: scale3d(0.85, 0.65, 1); 763 | } 764 | 765 | .button--dione:hover::after { 766 | transform: scale3d(1,1,1); 767 | } 768 | 769 | .button--helene { 770 | border-radius: 7px; 771 | border: 1px solid #000; 772 | font-family: chapman-extended, sans-serif; 773 | font-weight: 900; 774 | font-style: normal; 775 | text-transform: uppercase; 776 | font-size: 0.85rem; 777 | padding: 0 3rem; 778 | height: 4rem; 779 | } 780 | 781 | .button--helene::before { 782 | content: ''; 783 | top: 10px; 784 | left: 10px; 785 | width: calc(100% - 20px); 786 | height: calc(100% - 20px); 787 | background: rgba(0,0,0,0.5); 788 | filter: blur(7px); 789 | border-radius: 7px; 790 | z-index: -1; 791 | transform: translate3d(0,15px,0); 792 | transition: transform 0.45s; 793 | } 794 | 795 | .button--helene:hover::before { 796 | transform: translate3d(0,0,0); 797 | } 798 | 799 | .button--helene span { 800 | display: block; 801 | } 802 | 803 | .button--helene > span { 804 | height: 100%; 805 | overflow: hidden; 806 | line-height: 4rem; 807 | } 808 | 809 | .button--helene:hover > span > span { 810 | animation: slotMachine 0.15s ease-out forwards 3; 811 | } 812 | 813 | @keyframes slotMachine { 814 | 50% { 815 | transform: translate3d(0,100%,0); 816 | opacity: 0; 817 | } 818 | 51% { 819 | transform: translate3d(0,-100%,0); 820 | opacity: 0; 821 | } 822 | 100% { 823 | transform: translate3d(0,0,0); 824 | opacity: 1; 825 | } 826 | } 827 | 828 | .button--rhea { 829 | font-family: freight-display-pro, serif; 830 | font-weight: 900; 831 | font-style: normal; 832 | width: 180px; 833 | height: 180px; 834 | color: #000; 835 | background: none; 836 | } 837 | 838 | .button--rhea::before { 839 | content: ''; 840 | z-index: -1; 841 | background: #e7e7e7; 842 | -webkit-clip-path: polygon(20% 30%, 0 30%, 0 50%, 0 70%, 20% 70%, 50% 70%, 80% 70%, 100% 70%, 100% 50%, 100% 30%, 80% 30%, 50% 30%); 843 | clip-path: polygon(20% 30%, 0 30%, 0 50%, 0 70%, 20% 70%, 50% 70%, 80% 70%, 100% 70%, 100% 50%, 100% 30%, 80% 30%, 50% 30%); 844 | transition: clip-path 0.4s cubic-bezier(0.3, 1, 0.2, 1), -webkit-clip-path 0.4s cubic-bezier(0.3, 1, 0.2, 1), transform 0.4s cubic-bezier(0.3, 1, 0.2, 1), background 0.4s ease; 845 | } 846 | 847 | .button--rhea:hover::before { 848 | background: #000; 849 | transform: scale3d(0.7,0.7,1); 850 | -webkit-clip-path: polygon(30% 10%, 10% 30%, 30% 50%, 10% 70%, 30% 90%, 50% 70%, 70% 90%, 90% 70%, 70% 50%, 90% 30%, 70% 10%, 50% 30%); 851 | clip-path: polygon(30% 10%, 10% 30%, 30% 50%, 10% 70%, 30% 90%, 50% 70%, 70% 90%, 90% 70%, 70% 50%, 90% 30%, 70% 10%, 50% 30%); 852 | } 853 | 854 | .button--rhea span { 855 | display: block; 856 | transition: transform 0.4s cubic-bezier(0.3, 1, 0.2, 1), opacity 0.05s; 857 | } 858 | 859 | .button--rhea:hover span { 860 | transform: scale3d(0.1,0.1,1); 861 | opacity: 0; 862 | transition-delay: 0s, 0.35s; 863 | } 864 | 865 | .button--narvi { 866 | font-weight: bold; 867 | background: none; 868 | } 869 | 870 | .button--narvi::before { 871 | content: ''; 872 | z-index: -1; 873 | background: #e7e7e7; 874 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%); 875 | clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 80% 70%, 75% 70%, 0 70%); 876 | transition: clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1), -webkit-clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1), transform 0.3s ease; 877 | } 878 | 879 | .button--narvi:hover::before { 880 | transform: translate3d(0,-10px,0); 881 | -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%); 882 | clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 85% 70%, 86% 100%, 75% 70%, 0 70%); 883 | } 884 | 885 | .button--narvi span { 886 | display: block; 887 | position: relative; 888 | } 889 | 890 | .button--narvi > span { 891 | transition: transform 0.3s; 892 | transform: translate3d(0,-0.556rem,0); 893 | z-index: 1; 894 | overflow: hidden; 895 | } 896 | 897 | .button--narvi:hover > span { 898 | transform: translate3d(0,-1.111rem,0); 899 | } 900 | 901 | .button--narvi:hover > span > span { 902 | animation: MoveUpInitial 0.15s forwards, MoveUpEnd 0.15s forwards 0.15s; 903 | } 904 | 905 | .button--hati { 906 | border-radius: 50%; 907 | overflow: hidden; 908 | border: 2px solid; 909 | background: none; 910 | font-family: aktiv-grotesk-extended, sans-serif; 911 | font-weight: 900; 912 | font-style: italic; 913 | } 914 | 915 | .button--hati:hover { 916 | background: none; 917 | } 918 | 919 | .button--hati::before { 920 | animation: rotateIt 10s linear infinite; 921 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAUElEQVQoU3VPSQ4AMQiS/z/aBiMNNDNeXEBQoDL66dkG52/hzlmsSqMKrAVCoOXuxR3TFVSIIJmzsFvGOMlust3iivmQd/6+3/NlN4paIOEADPIUD/MQvy0AAAAASUVORK5CYII=); 922 | content: ''; 923 | width: 300%; 924 | height: 300%; 925 | top: -100%; 926 | left: -100%; 927 | z-index: -1; 928 | opacity: 0; 929 | transform-origin: 50% 50%; 930 | transition: opacity 0.3s; 931 | } 932 | 933 | @keyframes rotateIt { 934 | to { 935 | transform: rotate(-360deg); 936 | } 937 | } 938 | 939 | .button--hati:hover::before { 940 | opacity: 0.7; 941 | } 942 | 943 | .button--hati span { 944 | display: block; 945 | position: relative; 946 | z-index: 1; 947 | } 948 | 949 | .button--bestia { 950 | font-family: freight-display-pro, serif; 951 | font-size: 1.15rem; 952 | color: #fff; 953 | background: none; 954 | padding: 0; 955 | } 956 | 957 | .button--bestia .button__bg { 958 | top: 0; 959 | left: 0; 960 | position: absolute; 961 | width: 100%; 962 | height: 100%; 963 | background: #e7e7e7; 964 | border-radius: 0.85rem; 965 | overflow: hidden; 966 | transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); 967 | } 968 | 969 | .button--bestia:hover .button__bg { 970 | transform: scale3d(1.2,1.2,1); 971 | } 972 | 973 | .button--bestia .button__bg::before, 974 | .button--bestia .button__bg::after { 975 | content: ''; 976 | position: absolute; 977 | background: #000; 978 | } 979 | 980 | .button--bestia .button__bg::before { 981 | width: 110%; 982 | height: 0; 983 | padding-bottom: 110%; 984 | top: 50%; 985 | left: 50%; 986 | border-radius: 50%; 987 | transform: translate3d(-50%,-50%,0) scale3d(0,0,1); 988 | } 989 | 990 | .button--bestia:hover .button__bg::before { 991 | transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1); 992 | transform: translate3d(-50%,-50%,0) scale3d(1,1,1); 993 | } 994 | 995 | .button--bestia .button__bg::after { 996 | top: 0; 997 | left: 0; 998 | width: 100%; 999 | height: 100%; 1000 | opacity: 0; 1001 | transition: opacity 0.3s; 1002 | } 1003 | 1004 | .button--bestia:hover .button__bg::after { 1005 | opacity: 1; 1006 | transition-duration: 0.01s; 1007 | transition-delay: 0.3s; 1008 | } 1009 | 1010 | .button--bestia span { 1011 | display: block; 1012 | position: relative; 1013 | padding: 1.5rem 3rem; 1014 | mix-blend-mode: difference; 1015 | } 1016 | 1017 | /* Made with the help of Amelia Bellamy-Royds' article "Perfecting Paths for ": 1018 | https://oreillymedia.github.io/Using_SVG/extras/ch07-textpaths.html */ 1019 | 1020 | .button--surtur { 1021 | padding: 0; 1022 | background: none; 1023 | -webkit-clip-path: circle(40% at 50% 50%); 1024 | clip-path: circle(40% at 50% 50%); 1025 | } 1026 | 1027 | .button--surtur:focus-visible { 1028 | background: #443ffc; 1029 | } 1030 | 1031 | .textcircle { 1032 | position: relative; 1033 | display: block; 1034 | width: 200px; 1035 | } 1036 | 1037 | .textcircle text { 1038 | font-size: 32px; 1039 | text-transform: uppercase; 1040 | fill: #000; 1041 | } 1042 | 1043 | .textcircle textPath { 1044 | letter-spacing: 17px; /* Firefox needs this */ 1045 | } 1046 | 1047 | .button--surtur:hover .textcircle { 1048 | animation: rotateIt 7s linear infinite; 1049 | } 1050 | 1051 | .eye { 1052 | position: absolute; 1053 | z-index: 2; 1054 | width: 60px; 1055 | height: 60px; 1056 | top: calc(50% - 30px); 1057 | left: calc(50% - 30px); 1058 | } 1059 | 1060 | .eye__outer, 1061 | .eye__inner, 1062 | .eye__lashes-up, 1063 | .eye__lashes-down { 1064 | stroke: #000; 1065 | fill: none; 1066 | stroke-width: 1.5px; 1067 | } 1068 | 1069 | .eye__lashes-down { 1070 | opacity: 0; 1071 | } 1072 | 1073 | .button--surtur:hover .eye__lashes-up, 1074 | .button--surtur:hover .eye__inner, 1075 | .button--surtur:hover .eye__iris { 1076 | animation: blinkHide 2s step-end infinite; 1077 | } 1078 | 1079 | .button--surtur:hover .eye__lashes-down { 1080 | animation: blinkShow 2s step-end infinite; 1081 | } 1082 | 1083 | @keyframes blinkHide { 1084 | 0% { 1085 | opacity: 0; 1086 | } 1087 | 10% { 1088 | opacity: 1; 1089 | } 1090 | } 1091 | 1092 | @keyframes blinkShow { 1093 | 0% { 1094 | opacity: 1; 1095 | } 1096 | 10% { 1097 | opacity: 0; 1098 | } 1099 | } 1100 | 1101 | .button--fenrir { 1102 | background: none; 1103 | padding: 0; 1104 | -webkit-clip-path: circle(50% at 50% 50%); 1105 | clip-path: circle(50% at 50% 50%); 1106 | width: 120px; 1107 | height: 120px; 1108 | font-family: aktiv-grotesk-extended, sans-serif; 1109 | font-weight: 700; 1110 | text-transform: uppercase; 1111 | font-size: 0.85rem; 1112 | } 1113 | 1114 | .progress { 1115 | position: absolute; 1116 | width: 80px; 1117 | height: 80px; 1118 | top: calc(50% - 40px); 1119 | left: calc(50% - 40px); 1120 | transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); 1121 | } 1122 | 1123 | .button--fenrir:hover .progress { 1124 | transform: scale3d(1.2, 1.2, 1); 1125 | } 1126 | 1127 | .progress__circle, 1128 | .progress__path { 1129 | fill: none; 1130 | stroke: #f0f0f0; 1131 | stroke-width: 1px; 1132 | } 1133 | 1134 | .button--fenrir:focus-visible .progress__circle { 1135 | fill: rgba(252,196,63,0.4); 1136 | } 1137 | 1138 | .progress__path { 1139 | stroke: #a6a6a6; 1140 | stroke-dasharray: 1; 1141 | stroke-dashoffset: 1; 1142 | transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1); 1143 | } 1144 | 1145 | .button--fenrir:hover .progress__path { 1146 | stroke-dashoffset: 0; 1147 | } 1148 | 1149 | 1150 | @media screen and (min-width: 53em) { 1151 | .frame { 1152 | text-align: left; 1153 | z-index: 100; 1154 | display: grid; 1155 | align-content: space-between; 1156 | width: 100%; 1157 | max-width: none; 1158 | padding: 3rem 3.5rem; 1159 | pointer-events: none; 1160 | grid-template-columns: 50% 50%; 1161 | grid-template-rows: auto auto auto; 1162 | grid-template-areas: 'title links' 1163 | '... ...' 1164 | 'author ...'; 1165 | } 1166 | 1167 | .frame__title-wrap { 1168 | grid-area: title; 1169 | } 1170 | 1171 | .frame__title { 1172 | margin: 0; 1173 | } 1174 | 1175 | .frame__tagline { 1176 | position: relative; 1177 | margin-left: 0; 1178 | } 1179 | 1180 | .frame__links { 1181 | grid-area: links; 1182 | padding: 0; 1183 | justify-self: end; 1184 | align-self: start; 1185 | justify-content: start; 1186 | } 1187 | 1188 | .frame__author { 1189 | grid-area: author; 1190 | } 1191 | 1192 | .frame a { 1193 | pointer-events: auto; 1194 | } 1195 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ButtonHoverStyles/3976fa1b65dced5d330db43c51081787c3e7b46e/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Button Styles for Links | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 39 | 40 | 41 |
42 |
43 |
44 |

CSS Button Hover Styles

45 |

A collection of simple and subtle CSS-only hover animations for buttons.

46 |
47 |

More in this collection

48 |

CSS Line Hover Animations for Links

49 |
50 |
51 | 56 |
57 |
    58 |
  1. 59 | 60 |
    2. 61 |
  2. 62 | 63 |
    3. 64 |
  3. 65 | 66 |
    4. 67 |
  4. 68 | 79 |
    5. 80 |
  5. 81 | 92 |
    6. 93 |
  6. 94 | 95 |
    7. 96 |
  7. 97 | 98 |
    8. 99 |
  8. 100 | 101 |
    9. 102 |
  9. 103 | 104 |
    10. 105 |
  10. 106 | 107 |
    11. 108 |
  11. 109 | 110 |
    12. 111 |
  12. 112 | 113 |
    13. 114 |
  13. 115 | 116 |
    14. 117 |
  14. 118 | 119 |
    15. 120 |
  15. 121 | 122 |
    16. 123 |
  16. 124 | 125 |
    17. 126 |
  17. 127 | 128 |
    18. 129 |
  18. 130 | 131 |
    19. 132 |
  19. 133 | 136 |
    20. 137 |
  20. 138 | 153 |
    21. 154 |
  21. 155 | 162 |
    22. 163 |
164 |
165 |

More in this collection

166 | CSS Line Hover Animations for Links 167 |
168 | 171 |
172 | 173 | 174 | 175 | --------------------------------------------------------------------------------