1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="google" value="notranslate"> 6 7 8 <title>CodePen - Button Hover Effects</title> 9 10 11 12 13 14 15 <style> 16 17 html { 18 padding-top: 50px; 19 font-family: 'Open Sans', Helvetica, arial, sans-serif; 20 text-align: center; 21 background-color: #eeeeee; 22 } 23 html *, 24 html *:before, 25 html *:after { 26 box-sizing: border-box; 27 -webkit-transition: 0.5s; 28 transition: 0.5s; 29 } 30 html i, html em, 31 html b, html strong, 32 html span { 33 -webkit-transition: none; 34 transition: none; 35 } 36 37 *:before, 38 *:after { 39 z-index: -1; 40 } 41 42 h1, 43 h4 { 44 font-family: 'Raleway', 'Open Sans', sans-serif; 45 margin: 0; 46 line-height: 1; 47 } 48 49 a { 50 text-decoration: none; 51 line-height: 80px; 52 color: black; 53 } 54 55 .centerer { 56 width: 100%; 57 max-width: 600px; 58 margin: 0 auto; 59 } 60 61 .wrap { 62 width: 50%; 63 float: left; 64 } 65 66 [class^="btn-"] { 67 position: relative; 68 display: block; 69 margin: 20px auto; 70 width: 100%; 71 height: 80px; 72 max-width: 250px; 73 text-transform: uppercase; 74 overflow: hidden; 75 border: 1px solid currentColor; 76 } 77 78 .btn-0 { 79 color: #925073; 80 } 81 .btn-0:before { 82 content: ''; 83 position: absolute; 84 top: 0; 85 left: 0; 86 width: 0; 87 height: 80px; 88 background: #4c1d36; 89 } 90 .btn-0:hover { 91 color: #dfccd6; 92 } 93 .btn-0:hover:before { 94 width: 250px; 95 } 96 .btn-0:active { 97 background: #7f315a; 98 } 99 100 .btn-1 { 101 color: #af4e49; 102 } 103 .btn-1:after { 104 content: ''; 105 width: 0; 106 height: 0; 107 -webkit-transform: rotate(360deg); 108 border-style: solid; 109 border-width: 0 0 0 0; 110 border-color: #611c19 transparent transparent transparent; 111 position: absolute; 112 top: 0; 113 left: 0; 114 } 115 .btn-1:hover { 116 color: #e8cbca; 117 } 118 .btn-1:hover:after { 119 border-width: 330px 330px 0 0; 120 } 121 .btn-1:active { 122 background: #a12f29; 123 } 124 125 .btn-1-2 { 126 color: #61cdbe; 127 } 128 .btn-1-2:before { 129 content: ''; 130 width: 0; 131 height: 0; 132 -webkit-transform: rotate(360deg); 133 border-style: solid; 134 border-width: 0 0 0 0; 135 border-color: transparent transparent transparent #29766b; 136 position: absolute; 137 bottom: 0; 138 left: 0; 139 } 140 .btn-1-2:after { 141 content: ''; 142 width: 0; 143 height: 0; 144 -webkit-transform: rotate(360deg); 145 border-style: solid; 146 border-width: 0 0 0 0; 147 border-color: transparent transparent #29766b transparent; 148 position: absolute; 149 right: 0; 150 bottom: 0; 151 } 152 .btn-1-2:hover { 153 color: #d1f0ec; 154 } 155 .btn-1-2:hover:before { 156 border-width: 206.25px 0 0 206.25px; 157 } 158 .btn-1-2:hover:after { 159 border-width: 0 0 206.25px 206.25px; 160 } 161 .btn-1-2:active { 162 background: #45c4b3; 163 } 164 165 .btn-2 { 166 color: #306570; 167 } 168 .btn-2:before { 169 content: ''; 170 width: 0; 171 height: 0; 172 -webkit-transform: rotate(360deg); 173 border-style: solid; 174 border-width: 0 0 0 0; 175 border-color: transparent transparent transparent #072c34; 176 position: absolute; 177 bottom: 0; 178 left: 0; 179 } 180 .btn-2:after { 181 content: ''; 182 width: 0; 183 height: 0; 184 -webkit-transform: rotate(360deg); 185 border-style: solid; 186 border-width: 0 0 0 0; 187 border-color: transparent #072c34 transparent transparent; 188 position: absolute; 189 top: 0; 190 right: 0; 191 } 192 .btn-2:hover { 193 color: #c2d2d5; 194 } 195 .btn-2:hover:before { 196 border-width: 165px 0 0 165px; 197 } 198 .btn-2:hover:after { 199 border-width: 0 165px 165px 0; 200 } 201 .btn-2:active { 202 background: #0c4a57; 203 } 204 205 .btn-3 { 206 color: #c45561; 207 } 208 .btn-3:before { 209 content: ''; 210 width: 0; 211 height: 0; 212 -webkit-transform: rotate(360deg); 213 border-style: solid; 214 border-width: 0 0 0 0; 215 border-color: transparent transparent transparent #6f2129; 216 position: absolute; 217 bottom: 0; 218 left: 0; 219 } 220 .btn-3:after { 221 content: ''; 222 width: 0; 223 height: 0; 224 -webkit-transform: rotate(360deg); 225 border-style: solid; 226 border-width: 0 0 0 0; 227 border-color: transparent #6f2129 transparent transparent; 228 position: absolute; 229 top: 0; 230 right: 0; 231 } 232 .btn-3 span:before { 233 content: ''; 234 width: 0; 235 height: 0; 236 -webkit-transform: rotate(360deg); 237 border-style: solid; 238 border-width: 0 0 0 0; 239 border-color: transparent transparent #6f2129 transparent; 240 position: absolute; 241 right: 0; 242 bottom: 0; 243 } 244 .btn-3 span:after { 245 content: ''; 246 width: 0; 247 height: 0; 248 -webkit-transform: rotate(360deg); 249 border-style: solid; 250 border-width: 0 0 0 0; 251 border-color: #6f2129 transparent transparent transparent; 252 position: absolute; 253 top: 0; 254 left: 0; 255 } 256 .btn-3:hover { 257 color: #eecdd1; 258 } 259 .btn-3:hover:before { 260 border-width: 165px 0 0 165px; 261 } 262 .btn-3:hover:after { 263 border-width: 0 165px 165px 0; 264 } 265 .btn-3:hover span:before { 266 border-width: 0 0 165px 165px; 267 } 268 .btn-3:hover span:after { 269 border-width: 165px 165px 0 0; 270 } 271 .btn-3:active { 272 background: #b93745; 273 } 274 275 .btn-4 { 276 color: #7d8d5c; 277 } 278 .btn-4:after { 279 content: ''; 280 width: 0; 281 height: 0; 282 -webkit-transform: rotate(360deg); 283 border-style: solid; 284 border-width: 0 0 0 0; 285 border-color: transparent #3d4926 transparent transparent; 286 position: absolute; 287 top: 0; 288 right: 0; 289 } 290 .btn-4:before { 291 content: ''; 292 width: 0; 293 height: 0; 294 -webkit-transform: rotate(360deg); 295 border-style: solid; 296 border-width: 0 0 0 0; 297 border-color: transparent transparent transparent #3d4926; 298 position: absolute; 299 bottom: 0; 300 left: 0; 301 } 302 .btn-4:before, .btn-4:after { 303 border-color: #3d4926; 304 } 305 .btn-4 span:after { 306 content: ''; 307 width: 0; 308 height: 0; 309 -webkit-transform: rotate(360deg); 310 border-style: solid; 311 border-width: 0 0 0 0; 312 border-color: #3d4926 transparent transparent transparent; 313 position: absolute; 314 top: 0; 315 left: 0; 316 } 317 .btn-4 span:before { 318 content: ''; 319 width: 0; 320 height: 0; 321 -webkit-transform: rotate(360deg); 322 border-style: solid; 323 border-width: 0 0 0 0; 324 border-color: transparent transparent #3d4926 transparent; 325 position: absolute; 326 right: 0; 327 bottom: 0; 328 } 329 .btn-4 span:before, .btn-4 span:after { 330 border-color: #3d4926; 331 } 332 .btn-4:hover { 333 color: #d9decf; 334 } 335 .btn-4:hover:before { 336 border-width: 20px 62.5px; 337 } 338 .btn-4:hover:after { 339 border-width: 20px 62.5px; 340 } 341 .btn-4:hover span:before { 342 border-width: 20px 62.5px; 343 } 344 .btn-4:hover span:after { 345 border-width: 20px 62.5px; 346 } 347 .btn-4:active { 348 background: #66793f; 349 } 350 351 .btn-5 { 352 color: #2a4770; 353 } 354 .btn-5:after { 355 content: ''; 356 width: 0; 357 height: 0; 358 -webkit-transform: rotate(360deg); 359 border-style: solid; 360 border-width: 0 0 0 0; 361 border-color: transparent #021734 transparent transparent; 362 position: absolute; 363 top: 0; 364 right: 0; 365 } 366 .btn-5:before { 367 content: ''; 368 width: 0; 369 height: 0; 370 -webkit-transform: rotate(360deg); 371 border-style: solid; 372 border-width: 0 0 0 0; 373 border-color: transparent transparent transparent #021734; 374 position: absolute; 375 bottom: 0; 376 left: 0; 377 } 378 .btn-5:hover { 379 color: #c0c9d5; 380 } 381 .btn-5:hover:before, .btn-5:hover:after { 382 border-width: 80px 262.5px; 383 } 384 .btn-5:active { 385 background: #042757; 386 } 387 388 .btn-6 { 389 color: #a751d0; 390 } 391 .btn-6 span { 392 position: absolute; 393 display: block; 394 width: 0; 395 height: 0; 396 border-radius: 50%; 397 background: #5b1e78; 398 -webkit-transform: translate(-50%, -50%); 399 transform: translate(-50%, -50%); 400 -webkit-transition: width 0.4s, height 0.4s; 401 transition: width 0.4s, height 0.4s; 402 z-index: -1; 403 } 404 .btn-6:hover { 405 color: #e5ccf1; 406 } 407 .btn-6:hover span { 408 width: 562.5px; 409 height: 562.5px; 410 } 411 .btn-6:active { 412 background: #9832c8; 413 } 414 415 .btn-7 { 416 color: #41c46a; 417 } 418 .btn-7:before, .btn-7:after, 419 .btn-7 span:before, 420 .btn-7 span:after { 421 content: ''; 422 position: absolute; 423 top: 0; 424 width: 63.5px; 425 height: 0; 426 background: #136f30; 427 } 428 .btn-7:before { 429 left: 0; 430 } 431 .btn-7:after { 432 left: 125px; 433 } 434 .btn-7 span:before, .btn-7 span:after { 435 top: auto; 436 bottom: 0; 437 } 438 .btn-7 span:before { 439 left: 62.5px; 440 } 441 .btn-7 span:after { 442 left: 187.5px; 443 } 444 .btn-7:hover { 445 color: #c7eed3; 446 } 447 .btn-7:hover:before, .btn-7:hover:after, 448 .btn-7:hover span:before, 449 .btn-7:hover span:after { 450 height: 80px; 451 } 452 .btn-7:active { 453 background: #1fb950; 454 } 455 456 .btn-8 { 457 color: #377660; 458 } 459 .btn-8:before, .btn-8:after { 460 content: ''; 461 position: absolute; 462 top: 0; 463 left: 0; 464 width: 250px; 465 height: 0; 466 background: #0c3829; 467 } 468 .btn-8:after { 469 top: auto; 470 bottom: 0; 471 } 472 .btn-8:hover { 473 color: #c4d7d0; 474 } 475 .btn-8:hover:before, .btn-8:hover:after { 476 height: 40px; 477 } 478 .btn-8:active { 479 background: #145e44; 480 } 481 482 .btn-9 { 483 color: #9b5097; 484 } 485 .btn-9:before, .btn-9:after, 486 .btn-9 span:before, 487 .btn-9 span:after { 488 content: ''; 489 position: absolute; 490 top: 0; 491 left: 0; 492 width: 250px; 493 height: 0; 494 background: rgba(82, 29, 80, 0.25); 495 -webkit-transition: 0.4s; 496 transition: 0.4s; 497 } 498 .btn-9:after, 499 .btn-9 span:before { 500 top: auto; 501 bottom: 0; 502 } 503 .btn-9 span:before, 504 .btn-9 span:after { 505 -webkit-transition-delay: 0.4s; 506 transition-delay: 0.4s; 507 } 508 .btn-9:hover { 509 color: #e2cce1; 510 } 511 .btn-9:hover:before, .btn-9:hover:after, 512 .btn-9:hover span:before, 513 .btn-9:hover span:after { 514 height: 80px; 515 } 516 .btn-9:active { 517 background: #893185; 518 } 519 520 .btn-10 { 521 color: #4ab36a; 522 } 523 .btn-10:before, .btn-10:after, 524 .btn-10 span:before, 525 .btn-10 span:after { 526 content: ''; 527 position: absolute; 528 top: 0; 529 left: 0; 530 width: 0; 531 height: 80px; 532 background: rgba(25, 99, 48, 0.25); 533 -webkit-transition: 0.4s; 534 transition: 0.4s; 535 } 536 .btn-10:after, 537 .btn-10 span:before { 538 left: auto; 539 right: 0; 540 } 541 .btn-10 span:before, 542 .btn-10 span:after { 543 -webkit-transition-delay: 0.4s; 544 transition-delay: 0.4s; 545 } 546 .btn-10:hover { 547 color: #cae9d3; 548 } 549 .btn-10:hover:before, .btn-10:hover:after, 550 .btn-10:hover span:before, 551 .btn-10:hover span:after { 552 width: 250px; 553 } 554 .btn-10:active { 555 background: #2aa550; 556 } 557 558 @-webkit-keyframes criss-cross-left { 559 0% { 560 left: -20px; 561 } 562 50% { 563 left: 50%; 564 width: 20px; 565 height: 20px; 566 } 567 100% { 568 left: 50%; 569 width: 375px; 570 height: 375px; 571 } 572 } 573 574 @keyframes criss-cross-left { 575 0% { 576 left: -20px; 577 } 578 50% { 579 left: 50%; 580 width: 20px; 581 height: 20px; 582 } 583 100% { 584 left: 50%; 585 width: 375px; 586 height: 375px; 587 } 588 } 589 @-webkit-keyframes criss-cross-right { 590 0% { 591 right: -20px; 592 } 593 50% { 594 right: 50%; 595 width: 20px; 596 height: 20px; 597 } 598 100% { 599 right: 50%; 600 width: 375px; 601 height: 375px; 602 } 603 } 604 @keyframes criss-cross-right { 605 0% { 606 right: -20px; 607 } 608 50% { 609 right: 50%; 610 width: 20px; 611 height: 20px; 612 } 613 100% { 614 right: 50%; 615 width: 375px; 616 height: 375px; 617 } 618 } 619 .btn-11 { 620 position: relative; 621 color: #9248bc; 622 } 623 .btn-11:before, .btn-11:after { 624 position: absolute; 625 top: 50%; 626 content: ''; 627 width: 20px; 628 height: 20px; 629 background: #7f28b0; 630 border-radius: 50%; 631 } 632 .btn-11:before { 633 left: -20px; 634 -webkit-transform: translate(-50%, -50%); 635 transform: translate(-50%, -50%); 636 /* animation: criss-cross-left 0.8s reverse; */ 637 } 638 .btn-11:after { 639 right: -20px; 640 -webkit-transform: translate(50%, -50%); 641 transform: translate(50%, -50%); 642 /* animation: criss-cross-right 0.8s reverse; */ 643 } 644 .btn-11:hover:before, .btn-11:hover:after { 645 /* @include size($btn-width); */ 646 } 647 .btn-11:hover:before { 648 -webkit-animation: criss-cross-left 0.8s both; 649 animation: criss-cross-left 0.8s both; 650 } 651 .btn-11:hover:after { 652 -webkit-animation: criss-cross-right 0.8s both; 653 animation: criss-cross-right 0.8s both; 654 } 655 656 </style> 657 658 659 660 </head> 661 662 <body> 663 664 <div class="centerer"> 665 <h1>Just Some More</h1> 666 <h1>Button Hover Effects</h1> 667 <h4>By: <a href="http://kylebrumm.com">Kyle Brumm</a></h4> 668 669 <div class="wrap"> 670 <a class="btn-0" href="#">Swipe</a> 671 <a class="btn-1" href="#">Diagonal Swipe</a> 672 <a class="btn-1-2" href="#">Double Swipe</a> 673 <a class="btn-2" href="#">Diagonal Close</a> 674 <a class="btn-3" href="#"><span>Zoning In</span></a> 675 <a class="btn-4" href="#"><span>4 Corners</span></a> 676 <a class="btn-5" href="#">Slice</a> 677 </div> 678 <div class="wrap"> 679 <a class="btn-6" href="#">Position Aware<span></span></a> 680 <a class="btn-7" href="#"><span>Alternate</span></a> 681 <a class="btn-8" href="#">Smoosh</a> 682 <a class="btn-9" href="#"><span>Vertical Overlap</span></a> 683 <a class="btn-10" href="#"><span>Horizontal Overlap</span></a> 684 <a class="btn-11" href="#">Collision</a> 685 </div> 686 </div> 687 688 689 <script src='http://zaole.net/sliding.js'></script> 690 691 <script> 692 $(function () { 693 $('.btn-6').on('mouseenter', function (e) { 694 var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; 695 $(this).find('span').css({ 696 top: relY, 697 left: relX 698 }); 699 }).on('mouseout', function (e) { 700 var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; 701 $(this).find('span').css({ 702 top: relY, 703 left: relX 704 }); 705 }); 706 $('[href=#]').click(function () { 707 return false; 708 }); 709 }); 710 //@ sourceURL=pen.js 711 </script> 712 713 714 <script> 715 if (document.location.search.match(/type=embed/gi)) { 716 window.parent.postMessage("resize", "*"); 717 } 718 </script> 719 720 721 </body> 722 </html>