├── README.md ├── css ├── component.css └── default.css ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── icomoon │ ├── Read Me.txt │ ├── icomoon.dev.svg │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ ├── icomoon.woff │ └── license.txt ├── index.html └── js ├── classie.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | Creative Button Styles 3 | ========= 4 | Some creative and modern button styles and effects for your inspiration. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=15430) 7 | 8 | [demo](http://tympanus.net/Development/CreativeButtons/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('../fonts/icomoon/icomoon.eot'); 4 | src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/icomoon/icomoon.woff') format('woff'), 6 | url('../fonts/icomoon/icomoon.ttf') format('truetype'), 7 | url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* General button style (reset) */ 13 | .btn { 14 | border: none; 15 | font-family: inherit; 16 | font-size: inherit; 17 | color: inherit; 18 | background: none; 19 | cursor: pointer; 20 | padding: 25px 80px; 21 | display: inline-block; 22 | margin: 15px 30px; 23 | text-transform: uppercase; 24 | letter-spacing: 1px; 25 | font-weight: 700; 26 | outline: none; 27 | position: relative; 28 | -webkit-transition: all 0.3s; 29 | -moz-transition: all 0.3s; 30 | transition: all 0.3s; 31 | } 32 | 33 | .btn:after { 34 | content: ''; 35 | position: absolute; 36 | z-index: -1; 37 | -webkit-transition: all 0.3s; 38 | -moz-transition: all 0.3s; 39 | transition: all 0.3s; 40 | } 41 | 42 | /* Pseudo elements for icons */ 43 | .btn:before, 44 | .icon-heart:after, 45 | .icon-star:after, 46 | .icon-plus:after, 47 | .icon-file:before { 48 | font-family: 'icomoon'; 49 | speak: none; 50 | font-style: normal; 51 | font-weight: normal; 52 | font-variant: normal; 53 | text-transform: none; 54 | line-height: 1; 55 | position: relative; 56 | -webkit-font-smoothing: antialiased; 57 | } 58 | 59 | .icon-envelope:before { 60 | content: "\e000"; 61 | } 62 | 63 | .icon-cart:before { 64 | content: "\e007"; 65 | } 66 | 67 | .icon-cart-2:before { 68 | content: "\e008"; 69 | } 70 | 71 | .icon-heart:before { 72 | content: "\e009"; 73 | } 74 | 75 | /* Filled heart */ 76 | .icon-heart:after, 77 | .icon-heart-2:before { 78 | content: "\e00a"; 79 | } 80 | 81 | .icon-star:before { 82 | content: "\e00b"; 83 | } 84 | 85 | /* Filled star */ 86 | .icon-star:after, 87 | .icon-star-2:before { 88 | content: "\e00c"; 89 | } 90 | 91 | .icon-arrow-right:before { 92 | content: "\e00d"; 93 | } 94 | 95 | .icon-arrow-left:before { 96 | content: "\e003"; 97 | } 98 | 99 | .icon-truck:before { 100 | content: "\e00e"; 101 | } 102 | 103 | .icon-remove:before { 104 | content: "\e00f"; 105 | } 106 | 107 | .icon-cog:before { 108 | content: "\e010"; 109 | } 110 | 111 | .icon-plus:before, 112 | .icon-plus:after { 113 | content: "\e011"; 114 | } 115 | 116 | .icon-minus:before { 117 | content: "\e012"; 118 | } 119 | 120 | .bh-icon-smiley:before { 121 | content: "\e001"; 122 | } 123 | 124 | .bh-icon-sad:before { 125 | content: "\e002"; 126 | } 127 | 128 | .icon-file:before { 129 | content: "\e004"; 130 | } 131 | 132 | .icon-remove-2:before { 133 | content: "\e005"; 134 | } 135 | 136 | /* Button 1 */ 137 | .btn-1 { 138 | border: 3px solid #fff; 139 | color: #fff; 140 | } 141 | 142 | /* Button 1a */ 143 | .btn-1a:hover, 144 | .btn-1a:active { 145 | color: #0e83cd; 146 | background: #fff; 147 | } 148 | 149 | /* Button 1b */ 150 | .btn-1b:after { 151 | width: 100%; 152 | height: 0; 153 | top: 0; 154 | left: 0; 155 | background: #fff; 156 | } 157 | 158 | .btn-1b:hover, 159 | .btn-1b:active { 160 | color: #0e83cd; 161 | } 162 | 163 | .btn-1b:hover:after, 164 | .btn-1b:active:after { 165 | height: 100%; 166 | } 167 | 168 | /* Button 1c */ 169 | .btn-1c:after { 170 | width: 0%; 171 | height: 100%; 172 | top: 0; 173 | left: 0; 174 | background: #fff; 175 | } 176 | 177 | .btn-1c:hover, 178 | .btn-1c:active { 179 | color: #0e83cd; 180 | } 181 | 182 | .btn-1c:hover:after, 183 | .btn-1c:active:after { 184 | width: 100%; 185 | } 186 | 187 | /* Button 1d */ 188 | .btn-1d { 189 | overflow: hidden; 190 | } 191 | 192 | .btn-1d:after { 193 | width: 0; 194 | height: 103%; 195 | top: 50%; 196 | left: 50%; 197 | background: #fff; 198 | opacity: 0; 199 | -webkit-transform: translateX(-50%) translateY(-50%); 200 | -moz-transform: translateX(-50%) translateY(-50%); 201 | -ms-transform: translateX(-50%) translateY(-50%); 202 | transform: translateX(-50%) translateY(-50%); 203 | } 204 | 205 | .btn-1d:hover, 206 | .btn-1d:active { 207 | color: #0e83cd; 208 | } 209 | 210 | .btn-1d:hover:after { 211 | width: 90%; 212 | opacity: 1; 213 | } 214 | 215 | .btn-1d:active:after { 216 | width: 101%; 217 | opacity: 1; 218 | } 219 | 220 | /* Button 1e */ 221 | .btn-1e { 222 | overflow: hidden; 223 | } 224 | 225 | .btn-1e:after { 226 | width: 100%; 227 | height: 0; 228 | top: 50%; 229 | left: 50%; 230 | background: #fff; 231 | opacity: 0; 232 | -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); 233 | -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); 234 | -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); 235 | transform: translateX(-50%) translateY(-50%) rotate(45deg); 236 | } 237 | 238 | .btn-1e:hover, 239 | .btn-1e:active { 240 | color: #0e83cd; 241 | } 242 | 243 | .btn-1e:hover:after { 244 | height: 260%; 245 | opacity: 1; 246 | } 247 | 248 | .btn-1e:active:after { 249 | height: 400%; 250 | opacity: 1; 251 | } 252 | 253 | /* Button 1f */ 254 | .btn-1f { 255 | overflow: hidden; 256 | } 257 | 258 | .btn-1f:after { 259 | width: 101%; 260 | height: 0; 261 | top: 50%; 262 | left: 50%; 263 | background: #fff; 264 | opacity: 0; 265 | -webkit-transform: translateX(-50%) translateY(-50%); 266 | -moz-transform: translateX(-50%) translateY(-50%); 267 | -ms-transform: translateX(-50%) translateY(-50%); 268 | transform: translateX(-50%) translateY(-50%); 269 | } 270 | 271 | .btn-1f:hover, 272 | .btn-1f:active { 273 | color: #0e83cd; 274 | } 275 | 276 | .btn-1f:hover:after { 277 | height: 75%; 278 | opacity: 1; 279 | } 280 | 281 | .btn-1f:active:after { 282 | height: 130%; 283 | opacity: 1; 284 | } 285 | 286 | /* Button 2 */ 287 | .btn-2 { 288 | background: #cb4e4e; 289 | color: #fff; 290 | box-shadow: 0 6px #ab3c3c; 291 | -webkit-transition: none; 292 | -moz-transition: none; 293 | transition: none; 294 | } 295 | 296 | /* Button 2a */ 297 | .btn-2a { 298 | border-radius: 0 0 5px 5px; 299 | } 300 | 301 | .btn-2a:hover { 302 | box-shadow: 0 4px #ab3c3c; 303 | top: 2px; 304 | } 305 | 306 | .btn-2a:active { 307 | box-shadow: 0 0 #ab3c3c; 308 | top: 6px; 309 | } 310 | 311 | /* Button 2b */ 312 | .btn-2b { 313 | border-radius: 0 0 5px 5px; 314 | } 315 | 316 | .btn-2b:hover { 317 | box-shadow: 0 8px #ab3c3c; 318 | top: -2px; 319 | } 320 | 321 | .btn-2b:active { 322 | box-shadow: 0 0 #ab3c3c; 323 | top: 6px; 324 | } 325 | 326 | /* Button 2c */ 327 | .btn-2c { 328 | border-radius: 5px; 329 | } 330 | 331 | .btn-2c:hover { 332 | box-shadow: 0 4px #ab3c3c; 333 | top: 2px; 334 | } 335 | 336 | .btn-2c:active { 337 | box-shadow: 0 0 #ab3c3c; 338 | top: 6px; 339 | } 340 | 341 | /* Button 2d */ 342 | .btn-2d { 343 | border-radius: 5px; 344 | } 345 | 346 | .btn-2d:hover { 347 | box-shadow: 0 8px #ab3c3c; 348 | top: -2px; 349 | } 350 | 351 | .btn-2d:active { 352 | box-shadow: 0 0 #ab3c3c; 353 | top: 6px; 354 | } 355 | 356 | /* Button 2e */ 357 | .btn-2e { 358 | border-radius: 5px; 359 | box-shadow: -6px 0 #ab3c3c; 360 | } 361 | 362 | .btn-2e:hover { 363 | box-shadow: -4px 0 #ab3c3c; 364 | left: -2px; 365 | } 366 | 367 | .btn-2e:active { 368 | box-shadow: 0 0 #ab3c3c; 369 | left: -6px; 370 | } 371 | 372 | /* Button 2f */ 373 | .btn-2f { 374 | border-radius: 5px; 375 | box-shadow: 6px 0 #ab3c3c; 376 | } 377 | 378 | .btn-2f:hover { 379 | box-shadow: 4px 0 #ab3c3c; 380 | left: 2px; 381 | } 382 | 383 | .btn-2f:active { 384 | box-shadow: 0 0 #ab3c3c; 385 | left: 6px; 386 | } 387 | 388 | /* Button 2g */ 389 | .btn-2g { 390 | border-radius: 40px; 391 | } 392 | 393 | .btn-2g:hover { 394 | box-shadow: 0 4px #ab3c3c; 395 | top: 2px; 396 | } 397 | 398 | .btn-2g:active { 399 | box-shadow: 0 0 #ab3c3c; 400 | top: 6px; 401 | } 402 | 403 | /* Button 2h */ 404 | .btn-2h { 405 | border-radius: 20px; 406 | } 407 | 408 | .btn-2h:hover { 409 | box-shadow: 0 4px #ab3c3c; 410 | top: 2px; 411 | } 412 | 413 | .btn-2h:active { 414 | box-shadow: 0 0 #ab3c3c; 415 | top: 6px; 416 | } 417 | 418 | /* Button 2i */ 419 | .btn-2i { 420 | border-radius: 50%; 421 | width: 90px; 422 | height: 90px; 423 | padding: 0; 424 | } 425 | 426 | .btn-2i:hover { 427 | box-shadow: 0 4px #ab3c3c; 428 | top: 2px; 429 | } 430 | 431 | .btn-2i:active { 432 | box-shadow: 0 0 #ab3c3c; 433 | top: 6px; 434 | } 435 | 436 | /* Button 2j */ 437 | .btn-2j { 438 | border-radius: 50%; 439 | width: 90px; 440 | height: 90px; 441 | padding: 0; 442 | } 443 | 444 | .btn-2j:hover { 445 | box-shadow: 0 8px #ab3c3c; 446 | top: -2px; 447 | } 448 | 449 | .btn-2j:active { 450 | box-shadow: 0 0 #ab3c3c; 451 | top: 6px; 452 | } 453 | 454 | /* Button 3 */ 455 | .btn-3 { 456 | background: #fcad26; 457 | color: #fff; 458 | } 459 | 460 | .btn-3:hover { 461 | background: #f29e0d; 462 | } 463 | 464 | .btn-3:active { 465 | background: #f58500; 466 | top: 2px; 467 | } 468 | 469 | .btn-3:before { 470 | position: absolute; 471 | height: 100%; 472 | left: 0; 473 | top: 0; 474 | line-height: 3; 475 | font-size: 140%; 476 | width: 60px; 477 | } 478 | 479 | /* Button 3a */ 480 | .btn-3a { 481 | padding: 25px 60px 25px 120px; 482 | } 483 | 484 | .btn-3a:before { 485 | background: rgba(0,0,0,0.05); 486 | } 487 | 488 | /* Button 3b */ 489 | .btn-3b { 490 | padding: 25px 60px 25px 120px; 491 | border-radius: 10px; 492 | } 493 | 494 | .btn-3b:before { 495 | border-right: 2px solid rgba(255,255,255,0.5); 496 | } 497 | 498 | /* Button 3c */ 499 | .btn-3c { 500 | padding: 80px 20px 20px 20px; 501 | border-radius: 10px; 502 | box-shadow: 0 3px #da9622; 503 | } 504 | 505 | .btn-3c:active { 506 | box-shadow: 0 3px #dc7801; 507 | } 508 | 509 | .btn-3c:before { 510 | height: 60px; 511 | width: 100%; 512 | line-height: 60px; 513 | background: #fff; 514 | color: #f29e0d; 515 | border-radius: 10px 10px 0 0; 516 | } 517 | 518 | .btn-3c:active:before { 519 | color: #f58500; 520 | } 521 | 522 | /* Button 3d */ 523 | .btn-3d { 524 | padding: 25px 60px 25px 120px; 525 | border-radius: 10px; 526 | } 527 | 528 | .btn-3d:before { 529 | background: #fff; 530 | color: #fcad26; 531 | z-index: 2; 532 | border-radius: 10px 0 0 10px; 533 | } 534 | 535 | .btn-3d:after { 536 | width: 20px; 537 | height: 20px; 538 | background: #fff; 539 | z-index: 1; 540 | left: 55px; 541 | top: 50%; 542 | margin: -10px 0 0 -10px; 543 | -webkit-transform: rotate(45deg); 544 | -moz-transform: rotate(45deg); 545 | -ms-transform: rotate(45deg); 546 | transform: rotate(45deg); 547 | } 548 | 549 | .btn-3d:active:before { 550 | color: #f58500; 551 | } 552 | 553 | .btn-3d:active { 554 | top: 0; 555 | } 556 | 557 | .btn-3d:active:after { 558 | left: 60px; 559 | } 560 | 561 | /* Button 3e */ 562 | .btn-3e { 563 | padding: 25px 120px 25px 60px; 564 | overflow: hidden; 565 | } 566 | 567 | .btn-3e:before { 568 | left: auto; 569 | right: 10px; 570 | z-index: 2; 571 | } 572 | 573 | .btn-3e:after { 574 | width: 30%; 575 | height: 200%; 576 | background: rgba(255,255,255,0.1); 577 | z-index: 1; 578 | right: 0; 579 | top: 0; 580 | margin: -5px 0 0 -5px; 581 | -webkit-transform-origin: 0 0; 582 | -webkit-transform: rotate(-20deg); 583 | -moz-transform-origin: 0 0; 584 | -moz-transform: rotate(-20deg); 585 | -ms-transform-origin: 0 0; 586 | -ms-transform: rotate(-20deg); 587 | transform-origin: 0 0; 588 | transform: rotate(-20deg); 589 | } 590 | 591 | .btn-3e:hover:after { 592 | width: 40%; 593 | } 594 | 595 | /* Button 4 */ 596 | .btn-4 { 597 | border-radius: 50px; 598 | border: 3px solid #fff; 599 | color: #fff; 600 | overflow: hidden; 601 | } 602 | 603 | .btn-4:active { 604 | border-color: #17954c; 605 | color: #17954c; 606 | } 607 | 608 | .btn-4:hover { 609 | background: #24b662; 610 | } 611 | 612 | .btn-4:before { 613 | position: absolute; 614 | height: 100%; 615 | font-size: 125%; 616 | line-height: 3.5; 617 | color: #fff; 618 | -webkit-transition: all 0.3s; 619 | -moz-transition: all 0.3s; 620 | transition: all 0.3s; 621 | } 622 | 623 | .btn-4:active:before { 624 | color: #17954c; 625 | } 626 | 627 | /* Button 4a */ 628 | .btn-4a:before { 629 | left: 130%; 630 | top: 0; 631 | } 632 | 633 | .btn-4a:hover:before { 634 | left: 80%; 635 | } 636 | 637 | /* Button 4b */ 638 | .btn-4b:before { 639 | left: -50%; 640 | top: 0; 641 | } 642 | 643 | .btn-4b:hover:before { 644 | left: 10%; 645 | } 646 | 647 | /* Button 4c */ 648 | .btn-4c:before { 649 | left: 70%; 650 | opacity: 0; 651 | top: 0; 652 | } 653 | 654 | .btn-4c:hover:before { 655 | left: 80%; 656 | opacity: 1; 657 | } 658 | 659 | /* Button 4d */ 660 | .btn-4d:before { 661 | left: 30%; 662 | opacity: 0; 663 | top: 0; 664 | } 665 | 666 | .btn-4d:hover:before { 667 | left: 10%; 668 | opacity: 1; 669 | } 670 | 671 | /* Button 5 */ 672 | .btn-5 { 673 | background: #823aa0; 674 | color: #fff; 675 | height: 70px; 676 | min-width: 260px; 677 | line-height: 24px; 678 | font-size: 16px; 679 | overflow: hidden; 680 | -webkit-backface-visibility: hidden; 681 | -moz-backface-visibility: hidden; 682 | backface-visibility: hidden; 683 | } 684 | 685 | .btn-5:active { 686 | background: #9053a9; 687 | top: 2px; 688 | } 689 | 690 | .btn-5 span { 691 | display: inline-block; 692 | width: 100%; 693 | height: 100%; 694 | -webkit-transition: all 0.3s; 695 | -webkit-backface-visibility: hidden; 696 | -moz-transition: all 0.3s; 697 | -moz-backface-visibility: hidden; 698 | transition: all 0.3s; 699 | backface-visibility: hidden; 700 | } 701 | 702 | .btn-5:before { 703 | position: absolute; 704 | height: 100%; 705 | width: 100%; 706 | line-height: 2.5; 707 | font-size: 180%; 708 | -webkit-transition: all 0.3s; 709 | -moz-transition: all 0.3s; 710 | transition: all 0.3s; 711 | } 712 | 713 | .btn-5:active:before { 714 | color: #703b87; 715 | } 716 | 717 | /* Button 5a */ 718 | .btn-5a:hover span { 719 | -webkit-transform: translateY(300%); 720 | -moz-transform: translateY(300%); 721 | -ms-transform: translateY(300%); 722 | transform: translateY(300%); 723 | } 724 | 725 | .btn-5a:before { 726 | left: 0; 727 | top: -100%; 728 | } 729 | 730 | .btn-5a:hover:before { 731 | top: 0; 732 | } 733 | 734 | /* Button 5b */ 735 | .btn-5b:hover span { 736 | -webkit-transform: translateX(200%); 737 | -moz-transform: translateX(200%); 738 | -ms-transform: translateX(200%); 739 | transform: translateX(200%); 740 | } 741 | 742 | .btn-5b:before { 743 | left: -100%; 744 | top: 0; 745 | } 746 | 747 | .btn-5b:hover:before { 748 | left: 0; 749 | } 750 | 751 | /* Button 6 */ 752 | .btn-6 { 753 | color: #fff; 754 | background: #226fbe; 755 | -webkit-transition: none; 756 | -moz-transition: none; 757 | transition: none; 758 | } 759 | 760 | .btn-6:active { 761 | top: 2px; 762 | } 763 | 764 | /* Button 6a */ 765 | .btn-6a { 766 | border: 4px solid #226fbe; 767 | } 768 | 769 | .btn-6a:hover { 770 | background: transparent; 771 | color: #226fbe; 772 | } 773 | 774 | /* Button 6b */ 775 | .btn-6b { 776 | border: 4px solid #226fbe; 777 | border-radius: 15px; 778 | } 779 | 780 | .btn-6b:hover { 781 | background: transparent; 782 | color: #226fbe; 783 | } 784 | 785 | /* Button 6c */ 786 | .btn-6c { 787 | border: 4px solid #226fbe; 788 | border-radius: 60px; 789 | } 790 | 791 | .btn-6c:hover { 792 | background: transparent; 793 | color: #226fbe; 794 | } 795 | 796 | /* Button 6d */ 797 | .btn-6d { 798 | border: 2px dashed #226fbe; 799 | } 800 | 801 | .btn-6d:hover { 802 | background: transparent; 803 | color: #226fbe; 804 | } 805 | 806 | /* Button 6e */ 807 | .btn-6e { 808 | border: 2px dashed #226fbe; 809 | border-radius: 15px; 810 | } 811 | 812 | .btn-6e:hover { 813 | background: transparent; 814 | color: #226fbe; 815 | } 816 | 817 | /* Button 6f */ 818 | .btn-6f { 819 | border: 2px dashed #226fbe; 820 | border-radius: 60px; 821 | } 822 | 823 | .btn-6f:hover { 824 | background: transparent; 825 | color: #226fbe; 826 | } 827 | 828 | /* Button 6g */ 829 | .btn-6g { 830 | border: 2px dotted #226fbe; 831 | } 832 | 833 | .btn-6g:hover { 834 | background: transparent; 835 | color: #226fbe; 836 | } 837 | 838 | /* Button 6h */ 839 | .btn-6h { 840 | border: 2px dotted #226fbe; 841 | border-radius: 15px; 842 | } 843 | 844 | .btn-6h:hover { 845 | background: transparent; 846 | color: #226fbe; 847 | } 848 | 849 | /* Button 6i */ 850 | .btn-6i { 851 | border: 2px dotted #226fbe; 852 | border-radius: 60px; 853 | } 854 | 855 | .btn-6i:hover { 856 | background: transparent; 857 | color: #226fbe; 858 | } 859 | 860 | /* Button 6j */ 861 | .btn-6j { 862 | border: 4px double #226fbe; 863 | } 864 | 865 | .btn-6j:hover { 866 | background: transparent; 867 | color: #226fbe; 868 | } 869 | 870 | /* Button 6k */ 871 | .btn-6k { 872 | border: 4px double #226fbe; 873 | border-radius: 15px; 874 | } 875 | 876 | .btn-6k:hover { 877 | background: transparent; 878 | color: #226fbe; 879 | } 880 | 881 | /* Button 6l */ 882 | .btn-6l { 883 | border: 4px double #226fbe; 884 | border-radius: 60px; 885 | } 886 | 887 | .btn-6l:hover { 888 | background: transparent; 889 | color: #226fbe; 890 | } 891 | 892 | /* Button 7 */ 893 | .btn-7 { 894 | background: #17aa56; 895 | color: #fff; 896 | border-radius: 7px; 897 | box-shadow: 0 5px #119e4d; 898 | padding: 25px 60px 25px 90px; 899 | } 900 | 901 | /* Button 7a */ 902 | .btn-7a { 903 | overflow: hidden; 904 | } 905 | 906 | .btn-7a:before { 907 | position: absolute; 908 | left: 0; 909 | width: 40%; 910 | font-size: 160%; 911 | line-height: 0.8; 912 | color: #0a833d; 913 | } 914 | 915 | .btn-7a.btn-activated { 916 | -webkit-animation: fadeOutText 0.5s; 917 | -moz-animation: fadeOutText 0.5s; 918 | animation: fadeOutText 0.5s; 919 | } 920 | 921 | .btn-7a.btn-activated:before { 922 | -webkit-animation: moveToRight 0.5s; 923 | -moz-animation: moveToRight 0.5s; 924 | animation: moveToRight 0.5s; 925 | } 926 | 927 | @-webkit-keyframes fadeOutText { 928 | 0% { color: transparent; } 929 | 80% { color: transparent; } 930 | 100% { color: #fff; } 931 | } 932 | 933 | @-moz-keyframes fadeOutText { 934 | 0% { color: transparent; } 935 | 80% { color: transparent; } 936 | 100% { color: #fff; } 937 | } 938 | 939 | @keyframes fadeOutText { 940 | 0% { color: transparent; } 941 | 80% { color: transparent; } 942 | 100% { color: #fff; } 943 | } 944 | 945 | @-webkit-keyframes moveToRight { 946 | 80% { -webkit-transform: translateX(250%); } 947 | 81% { opacity: 1; -webkit-transform: translateX(250%); } 948 | 82% { opacity: 0; -webkit-transform: translateX(250%); } 949 | 83% { opacity: 0; -webkit-transform: translateX(-50%); } 950 | 84% { opacity: 1; -webkit-transform: translateX(-50%); } 951 | 100% { -webkit-transform: translateX(0%); } 952 | } 953 | 954 | @-moz-keyframes moveToRight { 955 | 80% { -moz-transform: translateX(250%); } 956 | 81% { opacity: 1; -moz-transform: translateX(250%); } 957 | 82% { opacity: 0; -moz-transform: translateX(250%); } 958 | 83% { opacity: 0; -moz-transform: translateX(-50%); } 959 | 84% { opacity: 1; -moz-transform: translateX(-50%); } 960 | 100% { -moz-transform: translateX(0%); } 961 | } 962 | 963 | @keyframes moveToRight { 964 | 80% { transform: translateX(250%); } 965 | 81% { opacity: 1; transform: translateX(250%); } 966 | 82% { opacity: 0; transform: translateX(250%); } 967 | 83% { opacity: 0; transform: translateX(-50%); } 968 | 84% { opacity: 1; transform: translateX(-50%); } 969 | 100% { transform: translateX(0%); } 970 | } 971 | 972 | /* Button 7b */ 973 | .btn-7b { 974 | overflow: hidden; 975 | } 976 | 977 | .btn-7b:before { 978 | position: absolute; 979 | left: 0; 980 | width: 40%; 981 | font-size: 160%; 982 | line-height: 0.8; 983 | color: #0a833d; 984 | } 985 | 986 | .btn-7b.btn-activated:before { 987 | -webkit-animation: scaleUp 0.5s; 988 | -moz-animation: scaleUp 0.5s; 989 | animation: scaleUp 0.5s; 990 | } 991 | 992 | @-webkit-keyframes scaleUp { 993 | 80% { 994 | opacity: 0; 995 | -webkit-transform: scale(2); 996 | } 997 | 100% { 998 | opacity: 0; 999 | -webkit-transform: scale(2); 1000 | } 1001 | } 1002 | 1003 | @-moz-keyframes scaleUp { 1004 | 80% { 1005 | opacity: 0; 1006 | -moz-transform: scale(2); 1007 | } 1008 | 100% { 1009 | opacity: 0; 1010 | -moz-transform: scale(2); 1011 | } 1012 | } 1013 | 1014 | @keyframes scaleUp { 1015 | 80% { 1016 | opacity: 0; 1017 | transform: scale(2); 1018 | } 1019 | 100% { 1020 | opacity: 0; 1021 | transform: scale(2); 1022 | } 1023 | } 1024 | 1025 | /* Icon only style */ 1026 | .btn-icon-only { 1027 | font-size: 0; 1028 | padding: 25px 30px; 1029 | } 1030 | 1031 | .btn-icon-only:before { 1032 | position: absolute; 1033 | top: 0; 1034 | left: 0; 1035 | width: 100%; 1036 | height: 100%; 1037 | font-size: 26px; 1038 | line-height: 54px; 1039 | -webkit-backface-visibility: hidden; 1040 | -moz-backface-visibility: hidden; 1041 | backface-visibility: hidden; 1042 | } 1043 | 1044 | /* Button 7c */ 1045 | .btn-7c { 1046 | overflow: hidden; 1047 | } 1048 | 1049 | .btn-7c:before { 1050 | color: #fff; 1051 | z-index: 1; 1052 | } 1053 | 1054 | .btn-7c:after { 1055 | position: absolute; 1056 | top: 0; 1057 | left: 0; 1058 | height: 100%; 1059 | z-index: 0; 1060 | width: 0; 1061 | background: #0a833d; 1062 | -webkit-transition: none; 1063 | -moz-transition: none; 1064 | transition: none; 1065 | } 1066 | 1067 | .btn-7c.btn-activated:after { 1068 | -webkit-animation: fillToRight 0.7s forwards; 1069 | -moz-animation: fillToRight 0.7s forwards; 1070 | animation: fillToRight 0.7s forwards; 1071 | } 1072 | 1073 | @-webkit-keyframes fillToRight { 1074 | to { 1075 | width: 100%; 1076 | } 1077 | } 1078 | 1079 | @-moz-keyframes fillToRight { 1080 | to { 1081 | width: 100%; 1082 | } 1083 | } 1084 | 1085 | @keyframes fillToRight { 1086 | to { 1087 | width: 100%; 1088 | } 1089 | } 1090 | 1091 | /* Button 7d */ 1092 | .btn-7d { 1093 | overflow: hidden; 1094 | } 1095 | 1096 | .btn-7d:before { 1097 | color: #fff; 1098 | z-index: 1; 1099 | } 1100 | 1101 | .btn-7d:after { 1102 | position: absolute; 1103 | top: 0; 1104 | left: 0; 1105 | height: 0; 1106 | width: 100%; 1107 | z-index: 0; 1108 | background: #21bb63; 1109 | -webkit-transition: none; 1110 | -moz-transition: none; 1111 | transition: none; 1112 | } 1113 | 1114 | .btn-7d.btn-activated:after { 1115 | -webkit-animation: emptyBottom 0.7s forwards; 1116 | -moz-animation: emptyBottom 0.7s forwards; 1117 | animation: emptyBottom 0.7s forwards; 1118 | } 1119 | 1120 | @-webkit-keyframes emptyBottom { 1121 | to { 1122 | height: 100%; 1123 | } 1124 | } 1125 | 1126 | @-moz-keyframes emptyBottom { 1127 | to { 1128 | height: 100%; 1129 | } 1130 | } 1131 | 1132 | @keyframes emptyBottom { 1133 | to { 1134 | height: 100%; 1135 | } 1136 | } 1137 | 1138 | /* Button 7e */ 1139 | .btn-7e:after { 1140 | position: absolute; 1141 | width: 100%; 1142 | height: 100%; 1143 | left: 0; 1144 | top: 0; 1145 | z-index: 1; 1146 | font-size: 26px; 1147 | line-height: 54px; 1148 | color: #ea515e; 1149 | -webkit-transform: scale(0); 1150 | -moz-transform: scale(0); 1151 | -ms-transform: scale(0); 1152 | transform: scale(0); 1153 | opacity: 0; 1154 | -webkit-transition: none; 1155 | -moz-transition: none; 1156 | transition: none; 1157 | } 1158 | 1159 | .btn-7e.btn-activated:after { 1160 | -webkit-animation: scaleFade 0.5s forwards; 1161 | -moz-animation: scaleFade 0.5s forwards; 1162 | animation: scaleFade 0.5s forwards; 1163 | } 1164 | 1165 | @-webkit-keyframes scaleFade { 1166 | 50% { 1167 | opacity: 1; 1168 | -webkit-transform: scale(1); 1169 | } 1170 | 100% { 1171 | opacity: 0; 1172 | -webkit-transform: scale(2.5); 1173 | } 1174 | } 1175 | 1176 | @-moz-keyframes scaleFade { 1177 | 50% { 1178 | opacity: 1; 1179 | -moz-transform: scale(1); 1180 | } 1181 | 100% { 1182 | opacity: 0; 1183 | -moz-transform: scale(2.5); 1184 | } 1185 | } 1186 | 1187 | @keyframes scaleFade { 1188 | 50% { 1189 | opacity: 1; 1190 | transform: scale(1); 1191 | } 1192 | 100% { 1193 | opacity: 0; 1194 | transform: scale(2.5); 1195 | } 1196 | } 1197 | 1198 | /* Button 7f */ 1199 | .btn-7f:before { 1200 | -webkit-text-stroke-width: 1px; 1201 | -webkit-text-stroke-color: #fff; 1202 | } 1203 | .btn-7f:after { 1204 | position: absolute; 1205 | width: 100%; 1206 | height: 100%; 1207 | left: 0; 1208 | top: 0; 1209 | z-index: 1; 1210 | font-size: 26px; 1211 | line-height: 54px; 1212 | color: #ffe44d; 1213 | visibility: hidden; 1214 | -webkit-text-stroke-width: 1px; 1215 | -webkit-text-stroke-color: #ffe44d; 1216 | -webkit-transform: scale(4); 1217 | -moz-transform: scale(4); 1218 | -ms-transform: scale(4); 1219 | transform: scale(4); 1220 | opacity: 0; 1221 | -webkit-transition: none; 1222 | -moz-transition: none; 1223 | transition: none; 1224 | } 1225 | 1226 | .btn-7f.btn-activated:after { 1227 | visibility: visible; 1228 | -webkit-animation: dropDown 0.3s forwards; 1229 | -moz-animation: dropDown 0.3s forwards; 1230 | animation: dropDown 0.3s forwards; 1231 | } 1232 | 1233 | @-webkit-keyframes dropDown { 1234 | to { 1235 | opacity: 1; 1236 | -webkit-transform: scale(1); 1237 | } 1238 | } 1239 | 1240 | @-moz-keyframes dropDown { 1241 | to { 1242 | opacity: 1; 1243 | -moz-transform: scale(1); 1244 | } 1245 | } 1246 | 1247 | @keyframes dropDown { 1248 | to { 1249 | opacity: 1; 1250 | transform: scale(1); 1251 | } 1252 | } 1253 | 1254 | /* Button 7g */ 1255 | .btn-7g:after { 1256 | position: absolute; 1257 | width: 100%; 1258 | height: 100%; 1259 | left: 0; 1260 | top: 0; 1261 | z-index: 1; 1262 | font-size: 26px; 1263 | line-height: 54px; 1264 | color: #0a833d; 1265 | visibility: hidden; 1266 | -webkit-transform: scale(2); 1267 | -moz-transform: scale(2); 1268 | -ms-transform: scale(2); 1269 | transform: scale(2); 1270 | opacity: 0; 1271 | -webkit-transition: none; 1272 | -moz-transition: none; 1273 | transition: none; 1274 | } 1275 | 1276 | .btn-7g.btn-activated:after { 1277 | visibility: visible; 1278 | -webkit-animation: dropDownFade 0.5s forwards; 1279 | -moz-animation: dropDownFade 0.5s forwards; 1280 | animation: dropDownFade 0.5s forwards; 1281 | } 1282 | 1283 | @-webkit-keyframes dropDownFade { 1284 | 50% { 1285 | opacity: 1; 1286 | -webkit-transform: scale(1); 1287 | } 1288 | 100% { 1289 | opacity: 0; 1290 | -webkit-transform: scale(1.5); 1291 | } 1292 | } 1293 | 1294 | @-moz-keyframes dropDownFade { 1295 | 50% { 1296 | opacity: 1; 1297 | -moz-transform: scale(1); 1298 | } 1299 | 100% { 1300 | opacity: 0; 1301 | -moz-transform: scale(1.5); 1302 | } 1303 | } 1304 | 1305 | @keyframes dropDownFade { 1306 | 50% { 1307 | opacity: 1; 1308 | transform: scale(1); 1309 | } 1310 | 100% { 1311 | opacity: 0; 1312 | transform: scale(1.5); 1313 | } 1314 | } 1315 | 1316 | /* Button 7h */ 1317 | 1318 | .btn-7h span { 1319 | display: inline-block; 1320 | width: 100%; 1321 | } 1322 | 1323 | .btn-7h:before { 1324 | position: absolute; 1325 | left: 0; 1326 | width: 40%; 1327 | font-size: 160%; 1328 | line-height: 0.8; 1329 | color: #0a833d; 1330 | } 1331 | 1332 | /* Success and error */ 1333 | 1334 | .btn-success, 1335 | .btn-error { 1336 | color: transparent; 1337 | } 1338 | 1339 | .btn-success:after, 1340 | .btn-error:after { 1341 | z-index: 1; 1342 | color: #fff; 1343 | left: 40%; 1344 | } 1345 | 1346 | .btn-success:before { 1347 | content: "\e001"; 1348 | } 1349 | 1350 | .btn-success:after { 1351 | content: "Success!"; 1352 | -webkit-animation: moveUp 0.5s; 1353 | -moz-animation: moveUp 0.5s; 1354 | animation: moveUp 0.5s; 1355 | } 1356 | 1357 | @-webkit-keyframes moveUp { 1358 | 0% { 1359 | -webkit-transform: translateY(50%); 1360 | opacity: 0; 1361 | } 1362 | 100% { 1363 | opacity: 1; 1364 | -webkit-transform: translateY(0); 1365 | } 1366 | } 1367 | 1368 | @-moz-keyframes moveUp { 1369 | 0% { 1370 | -moz-transform: translateY(50%); 1371 | opacity: 0; 1372 | } 1373 | 100% { 1374 | opacity: 1; 1375 | -moz-transform: translateY(0); 1376 | } 1377 | } 1378 | 1379 | @keyframes moveUp { 1380 | 0% { 1381 | transform: translateY(50%); 1382 | opacity: 0; 1383 | } 1384 | 100% { 1385 | opacity: 1; 1386 | transform: translateY(0); 1387 | } 1388 | } 1389 | 1390 | .btn-error { 1391 | -webkit-animation: shake 0.5s; 1392 | -moz-animation: shake 0.5s; 1393 | animation: shake 0.5s; 1394 | } 1395 | 1396 | /* From Dan Eden's animate.css: http://daneden.me/animate/ */ 1397 | @-webkit-keyframes shake { 1398 | 0%, 100% {-webkit-transform: translateX(0);} 1399 | 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 1400 | 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 1401 | } 1402 | 1403 | @-moz-keyframes shake { 1404 | 0%, 100% {-moz-transform: translateX(0);} 1405 | 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 1406 | 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} 1407 | } 1408 | 1409 | @keyframes shake { 1410 | 0%, 100% {transform: translateX(0);} 1411 | 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 1412 | 20%, 40%, 60%, 80% {transform: translateX(10px);} 1413 | } 1414 | 1415 | .btn-error:before { 1416 | content: "\e002"; 1417 | } 1418 | 1419 | .btn-error:after { 1420 | content: "Error!"; 1421 | -webkit-animation: scaleFromUp 0.5s; 1422 | -moz-animation: scaleFromUp 0.5s; 1423 | animation: scaleFromUp 0.5s; 1424 | } 1425 | 1426 | @-webkit-keyframes scaleFromUp { 1427 | 0% { 1428 | -webkit-transform: scale(0); 1429 | opacity: 0; 1430 | } 1431 | 100% { 1432 | opacity: 1; 1433 | -webkit-transform: scale(1); 1434 | } 1435 | } 1436 | 1437 | @-moz-keyframes scaleFromUp { 1438 | 0% { 1439 | -moz-transform: scale(0); 1440 | opacity: 0; 1441 | } 1442 | 100% { 1443 | opacity: 1; 1444 | -moz-transform: scale(1); 1445 | } 1446 | } 1447 | 1448 | @keyframes scaleFromUp { 1449 | 0% { 1450 | transform: scale(0); 1451 | opacity: 0; 1452 | } 1453 | 100% { 1454 | opacity: 1; 1455 | transform: scale(1); 1456 | } 1457 | } 1458 | 1459 | /* Special trash effect */ 1460 | .trash-effect { 1461 | position: relative; 1462 | max-width: 320px; 1463 | margin: 60px auto 0; 1464 | } 1465 | 1466 | .trash-effect .icon-file { 1467 | font-size: 30px; 1468 | position: absolute; 1469 | width: 50px; 1470 | height: 50px; 1471 | left: 50%; 1472 | top: 50%; 1473 | margin: -45px 0 0 -25px; 1474 | -webkit-transition: all 0.3s ease-out; 1475 | -moz-transition: all 0.3s ease-out; 1476 | transition: all 0.3s ease-out; 1477 | -webkit-transform: translateX(90px) translateY(20px) scale(1); 1478 | -moz-transform: translateX(90px) translateY(20px) scale(1); 1479 | -ms-transform: translateX(90px) translateY(20px) scale(1); 1480 | transform: translateX(90px) translateY(20px) scale(1); 1481 | } 1482 | 1483 | .trash-effect .icon-file:nth-child(2) { 1484 | -webkit-transform: translateX(140px) translateY(-10px) scale(1); 1485 | -moz-transform: translateX(140px) translateY(-10px) scale(1); 1486 | -ms-transform: translateX(140px) translateY(-10px) scale(1); 1487 | transform: translateX(140px) translateY(-10px) scale(1); 1488 | -webkit-transition-delay: 0.1s; 1489 | -moz-transition-delay: 0.1s; 1490 | transition-delay: 0.1s; 1491 | } 1492 | 1493 | .trash-effect .icon-file:nth-child(3) { 1494 | -webkit-transform: translateX(140px) translateY(50px) scale(1); 1495 | -moz-transform: translateX(140px) translateY(50px) scale(1); 1496 | -ms-transform: translateX(140px) translateY(50px) scale(1); 1497 | transform: translateX(140px) translateY(50px) scale(1); 1498 | -webkit-transition-delay: 0.2s; 1499 | -moz-transition-delay: 0.2s; 1500 | transition-delay: 0.2s; 1501 | } 1502 | 1503 | .trash-effect.trash-effect-active .icon-file { 1504 | -webkit-transform: translateX(-100px) translateY(-10px) scale(0); 1505 | -moz-transform: translateX(-100px) translateY(-10px) scale(0); 1506 | -ms-transform: translateX(-100px) translateY(-10px) scale(0); 1507 | transform: translateX(-100px) translateY(-10px) scale(0); 1508 | } 1509 | 1510 | /* Button 7i */ 1511 | .btn-7i { 1512 | box-shadow: none; 1513 | border-radius: 0 0 7px 7px; 1514 | padding: 27px 33px; 1515 | -webkit-transform: translateX(-100px); 1516 | -moz-transform: translateX(-100px); 1517 | -ms-transform: translateX(-100px); 1518 | transform: translateX(-100px); 1519 | } 1520 | 1521 | .btn-7i:before { 1522 | line-height: 45px; 1523 | } 1524 | 1525 | .btn-7i:after { 1526 | height: 11px; /* should be 10px but in Chrome Version 34.0.1847.131 there's a gap because of the transform of the button */ 1527 | width: 100%; 1528 | background: #17aa56; 1529 | border-radius: 7px 7px 0 0; 1530 | left: 0; 1531 | top: -10px; 1532 | z-index: 1; 1533 | -webkit-transform-origin: 0 100%; 1534 | -moz-transform-origin: 0 100%; 1535 | -ms-transform-origin: 0 100%; 1536 | transform-origin: 0 100%; 1537 | } 1538 | 1539 | .trash-effect-active .btn-7i:after { 1540 | -webkit-animation: openTrash 0.5s; 1541 | -moz-animation: openTrash 0.5s; 1542 | animation: openTrash 0.5s; 1543 | } 1544 | 1545 | @-webkit-keyframes openTrash { 1546 | 50% { 1547 | -webkit-transform: rotate(-35deg); 1548 | } 1549 | 100% { 1550 | -webkit-transform: rotate(0deg); 1551 | } 1552 | } 1553 | 1554 | @-moz-keyframes openTrash { 1555 | 50% { 1556 | -moz-transform: rotate(-35deg); 1557 | } 1558 | 100% { 1559 | -moz-transform: rotate(0deg); 1560 | } 1561 | } 1562 | 1563 | @keyframes openTrash { 1564 | 50% { 1565 | transform: rotate(-35deg); 1566 | } 1567 | 100% { 1568 | transform: rotate(0deg); 1569 | } 1570 | } 1571 | 1572 | /* Button 8 */ 1573 | .perspective { 1574 | -webkit-perspective: 800px; 1575 | -moz-perspective: 800px; 1576 | perspective: 800px; 1577 | display: inline-block; 1578 | } 1579 | 1580 | .btn-8 { 1581 | display: block; 1582 | background: #5cbcf6; 1583 | outline: 1px solid transparent; /* FF jagged edges fix */ 1584 | -webkit-transform-style: preserve-3d; 1585 | -moz-transform-style: preserve-3d; 1586 | transform-style: preserve-3d; 1587 | } 1588 | 1589 | .btn-8:active { 1590 | background: #55b7f3; 1591 | } 1592 | 1593 | /* Button 8a */ 1594 | .btn-8a:after { 1595 | width: 100%; 1596 | height: 42%; /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */ 1597 | left: 0; 1598 | top: -40%; 1599 | background: #49a7df; 1600 | -webkit-transform-origin: 0% 100%; 1601 | -webkit-transform: rotateX(90deg); 1602 | -moz-transform-origin: 0% 100%; 1603 | -moz-transform: rotateX(90deg); 1604 | transform-origin: 0% 100%; 1605 | transform: rotateX(90deg); 1606 | } 1607 | 1608 | .btn-8a:hover { 1609 | -webkit-transform: rotateX(-15deg); 1610 | -moz-transform: rotateX(-15deg); 1611 | -ms-transform: rotateX(-15deg); 1612 | transform: rotateX(-15deg); 1613 | } 1614 | 1615 | /* Button 8b */ 1616 | .btn-8b:after { 1617 | width: 100%; 1618 | height: 40%; 1619 | left: 0; 1620 | top: 100%; 1621 | background: #49a7df; 1622 | -webkit-transform-origin: 0% 0%; 1623 | -webkit-transform: rotateX(-90deg); 1624 | -moz-transform-origin: 0% 0%; 1625 | -moz-transform: rotateX(-90deg); 1626 | -ms-transform-origin: 0% 0%; 1627 | -ms-transform: rotateX(-90deg); 1628 | transform-origin: 0% 0%; 1629 | transform: rotateX(-90deg); 1630 | } 1631 | 1632 | .btn-8b:hover { 1633 | -webkit-transform: rotateX(15deg); 1634 | -moz-transform: rotateX(15deg); 1635 | -ms-transform: rotateX(15deg); 1636 | transform: rotateX(15deg); 1637 | } 1638 | 1639 | /* Button 8c */ 1640 | .btn-8c:after { 1641 | width: 21%; /* should be 20% but there's a gap in Chrome Version 34.0.1847.131 */ 1642 | height: 100%; 1643 | left: -20%; 1644 | top: 0; 1645 | background: #49a7df; 1646 | -webkit-transform-origin: 100% 0%; 1647 | -webkit-transform: rotateY(-90deg); 1648 | -moz-transform-origin: 100% 0%; 1649 | -moz-transform: rotateY(-90deg); 1650 | -ms-transform-origin: 100% 0%; 1651 | -ms-transform: rotateY(-90deg); 1652 | transform-origin: 100% 0%; 1653 | transform: rotateY(-90deg); 1654 | } 1655 | 1656 | .btn-8c:hover { 1657 | -webkit-transform: rotateY(15deg); 1658 | -moz-transform: rotateY(15deg); 1659 | -ms-transform: rotateY(15deg); 1660 | transform: rotateY(15deg); 1661 | } 1662 | 1663 | /* Button 8d */ 1664 | .btn-8d:after { 1665 | width: 20%; 1666 | height: 100%; 1667 | left: 100%; 1668 | top: 0; 1669 | background: #49a7df; 1670 | -webkit-transform-origin: 0% 0%; 1671 | -webkit-transform: rotateY(90deg); 1672 | -moz-transform-origin: 0% 0%; 1673 | -moz-transform: rotateY(90deg); 1674 | -ms-transform-origin: 0% 0%; 1675 | -ms-transform: rotateY(90deg); 1676 | transform-origin: 0% 0%; 1677 | transform: rotateY(90deg); 1678 | } 1679 | 1680 | .btn-8d:hover { 1681 | -webkit-transform: rotateY(-15deg); 1682 | -moz-transform: rotateY(-15deg); 1683 | -ms-transform: rotateY(-15deg); 1684 | transform: rotateY(-15deg); 1685 | } 1686 | 1687 | /* Button 8e */ 1688 | .btn-8e { 1689 | -webkit-transform: rotateX(-15deg); 1690 | -moz-transform: rotateX(-15deg); 1691 | -ms-transform: rotateX(-15deg); 1692 | transform: rotateX(-15deg); 1693 | } 1694 | 1695 | .btn-8e:after { 1696 | width: 100%; 1697 | height: 42%; /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */ 1698 | left: 0; 1699 | top: -40%; 1700 | background: #49a7df; 1701 | -webkit-transform-origin: 0% 100%; 1702 | -webkit-transform: rotateX(90deg); 1703 | -moz-transform-origin: 0% 100%; 1704 | -moz-transform: rotateX(90deg); 1705 | -ms-transform-origin: 0% 100%; 1706 | -ms-transform: rotateX(90deg); 1707 | transform-origin: 0% 100%; 1708 | transform: rotateX(90deg); 1709 | } 1710 | 1711 | .btn-8e:active { 1712 | -webkit-transform: rotateX(0deg); 1713 | -moz-transform: rotateX(0deg); 1714 | -ms-transform: rotateX(0deg); 1715 | transform: rotateX(0deg); 1716 | } 1717 | 1718 | /* Button 8f */ 1719 | .btn-8f { 1720 | -webkit-transform: rotateX(15deg); 1721 | -moz-transform: rotateX(15deg); 1722 | -ms-transform: rotateX(15deg); 1723 | transform: rotateX(15deg); 1724 | } 1725 | 1726 | .btn-8f:after { 1727 | width: 100%; 1728 | height: 40%; 1729 | left: 0; 1730 | top: 100%; 1731 | background: #49a7df; 1732 | -webkit-transform-origin: 0% 0%; 1733 | -webkit-transform: rotateX(-90deg); 1734 | -moz-transform-origin: 0% 0%; 1735 | -moz-transform: rotateX(-90deg); 1736 | -ms-transform-origin: 0% 0%; 1737 | -ms-transform: rotateX(-90deg); 1738 | transform-origin: 0% 0%; 1739 | transform: rotateX(-90deg); 1740 | } 1741 | 1742 | .btn-8f:active { 1743 | -webkit-transform: rotateX(0deg); 1744 | -moz-transform: rotateX(0deg); 1745 | -ms-transform: rotateX(0deg); 1746 | transform: rotateX(0deg); 1747 | } 1748 | 1749 | /* Button 8g */ 1750 | .btn-8g { 1751 | background: #fff; 1752 | color: #999; 1753 | } 1754 | 1755 | .btn-8g:active { 1756 | background: #fff; 1757 | } 1758 | 1759 | .btn-8g:after, 1760 | .btn-8g:before { 1761 | text-transform: uppercase; 1762 | width: 100%; 1763 | height: 100%; 1764 | position: absolute; 1765 | left: 0; 1766 | line-height: 70px; 1767 | } 1768 | 1769 | .btn-8g:after { 1770 | top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */ 1771 | background: #7aca7c; 1772 | color: #358337; 1773 | content: 'It worked!'; 1774 | -webkit-transform-origin: 0% 100%; 1775 | -webkit-transform: rotateX(90deg); 1776 | -moz-transform-origin: 0% 100%; 1777 | -moz-transform: rotateX(90deg); 1778 | -ms-transform-origin: 0% 100%; 1779 | -ms-transform: rotateX(90deg); 1780 | transform-origin: 0% 100%; 1781 | transform: rotateX(90deg); 1782 | } 1783 | 1784 | .btn-8g:before { 1785 | top: 100%; 1786 | background: #e96a6a; 1787 | color: #a33a3a; 1788 | content: 'Error!'; 1789 | font-weight: 700; 1790 | font-family: 'Lato', Calibri, Arial, sans-serif; 1791 | -webkit-transform-origin: 0% 0%; 1792 | -webkit-transform: rotateX(-90deg); 1793 | -moz-transform-origin: 0% 0%; 1794 | -moz-transform: rotateX(-90deg); 1795 | -ms-transform-origin: 0% 0%; 1796 | -ms-transform: rotateX(-90deg); 1797 | transform-origin: 0% 0%; 1798 | transform: rotateX(-90deg); 1799 | } 1800 | 1801 | .btn-8g.btn-success3d { 1802 | background: #aaa; 1803 | -webkit-transform-origin: 50% 100%; 1804 | -webkit-transform: rotateX(-90deg) translateY(100%); 1805 | -moz-transform-origin: 50% 100%; 1806 | -moz-transform: rotateX(-90deg) translateY(100%); 1807 | -ms-transform-origin: 50% 100%; 1808 | -ms-transform: rotateX(-90deg) translateY(100%); 1809 | transform-origin: 50% 100%; 1810 | transform: rotateX(-90deg) translateY(100%); 1811 | } 1812 | 1813 | .btn-8g.btn-error3d { 1814 | background: #aaa; 1815 | -webkit-transform-origin: 50% 0%; 1816 | -webkit-transform: rotateX(90deg) translateY(-100%); 1817 | -moz-transform-origin: 50% 0%; 1818 | -moz-transform: rotateX(90deg) translateY(-100%); 1819 | -ms-transform-origin: 50% 0%; 1820 | -ms-transform: rotateX(90deg) translateY(-100%); 1821 | transform-origin: 50% 0%; 1822 | transform: rotateX(90deg) translateY(-100%); 1823 | } 1824 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Lato', Calibri, Arial, sans-serif; 24 | color: #89867e; 25 | background: #fff; 26 | } 27 | 28 | a { 29 | color: #888; 30 | text-decoration: none; 31 | } 32 | 33 | a:hover, 34 | a:active { 35 | color: #333; 36 | } 37 | 38 | /* Header Style */ 39 | .main, 40 | .container > header { 41 | margin: 0 auto; 42 | padding: 2em; 43 | } 44 | 45 | .container > header { 46 | text-align: center; 47 | } 48 | 49 | .container > header h1 { 50 | font-size: 2.625em; 51 | line-height: 1.3; 52 | margin: 0; 53 | font-weight: 300; 54 | } 55 | 56 | .container > header span { 57 | display: block; 58 | font-size: 60%; 59 | opacity: 0.5; 60 | padding: 0 0 0.6em 0.1em; 61 | } 62 | 63 | /* To Navigation Style */ 64 | .codrops-top { 65 | background: #fff; 66 | background: rgba(255, 255, 255, 0.6); 67 | text-transform: uppercase; 68 | width: 100%; 69 | font-size: 0.69em; 70 | line-height: 2.2; 71 | } 72 | 73 | .codrops-top a { 74 | padding: 0 1em; 75 | letter-spacing: 0.1em; 76 | color: #888; 77 | display: inline-block; 78 | } 79 | 80 | .codrops-top a:hover { 81 | background: rgba(255,255,255,0.95); 82 | color: #333; 83 | } 84 | 85 | .codrops-top span.right { 86 | float: right; 87 | } 88 | 89 | .codrops-top span.right a { 90 | float: left; 91 | display: block; 92 | } 93 | 94 | .codrops-icon:before { 95 | font-family: 'codropsicons'; 96 | margin: 0 4px; 97 | speak: none; 98 | font-style: normal; 99 | font-weight: normal; 100 | font-variant: normal; 101 | text-transform: none; 102 | line-height: 1; 103 | -webkit-font-smoothing: antialiased; 104 | } 105 | 106 | .codrops-icon-drop:before { 107 | content: "\e001"; 108 | } 109 | 110 | .codrops-icon-prev:before { 111 | content: "\e004"; 112 | } 113 | 114 | .codrops-icon-archive:before { 115 | content: "\e002"; 116 | } 117 | 118 | .codrops-icon-next:before { 119 | content: "\e000"; 120 | } 121 | 122 | .codrops-icon-about:before { 123 | content: "\e003"; 124 | } 125 | 126 | .container { 127 | height: 100%; 128 | position: relative; 129 | } 130 | 131 | .container > section { 132 | margin: 0 auto; 133 | padding: 5em 3em; 134 | text-align: center; 135 | color: #fff; 136 | } 137 | 138 | .container > section p { 139 | position: relative; 140 | margin: 0; 141 | padding: 1em; 142 | z-index: 1; 143 | } 144 | 145 | .container > section p.text { 146 | font-size: 1.4em; 147 | } 148 | 149 | .no-touch .note-touch { 150 | display: none; 151 | } 152 | 153 | .color-1 { 154 | background: #0e83cd; 155 | } 156 | 157 | .color-2 { 158 | background: #f06060; 159 | } 160 | 161 | .color-3 { 162 | background: #fcd04b; 163 | } 164 | 165 | .color-4 { 166 | background: #2ecc71; 167 | } 168 | 169 | .color-5 { 170 | background: #9e54bd; 171 | } 172 | 173 | .color-6 { 174 | background: #4593e3; 175 | } 176 | 177 | .color-7 { 178 | background: #2ac56c; 179 | } 180 | 181 | .color-8 { 182 | background: #ecf0f1; 183 | } 184 | 185 | .color-8 p.text { 186 | color: #aaa; 187 | font-weight: bold; 188 | } 189 | 190 | @media screen and (max-width: 25em) { 191 | 192 | .codrops-icon span { 193 | display: none; 194 | } 195 | 196 | } -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeButtons/ce39ae40827229a0a94767f169037984f3cd5a7c/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeButtons/ce39ae40827229a0a94767f169037984f3cd5a7c/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeButtons/ce39ae40827229a0a94767f169037984f3cd5a7c/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/icomoon/Read Me.txt: -------------------------------------------------------------------------------- 1 | To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file. 2 | 3 | See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 18 | 25 | 31 | 32 | 35 | 37 | 40 | 43 | 48 | 55 | 58 | 60 | 62 | 65 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeButtons/ce39ae40827229a0a94767f169037984f3cd5a7c/fonts/icomoon/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 18 | 25 | 31 | 32 | 35 | 37 | 40 | 43 | 48 | 55 | 58 | 60 | 62 | 65 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeButtons/ce39ae40827229a0a94767f169037984f3cd5a7c/fonts/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CreativeButtons/ce39ae40827229a0a94767f169037984f3cd5a7c/fonts/icomoon/icomoon.woff -------------------------------------------------------------------------------- /fonts/icomoon/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ 2 | License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ 3 | 4 | 5 | Icon Set: Broccolidry -- http://dribbble.com/shots/587469-Free-16px-Broccolidryiconsaniconsetitisfullof-icons 6 | License: Aribitrary -- http://licence.visualidiot.com/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Creative Button Styles 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | Previous Demo 21 | Back to the Codrops Article 22 |
23 |
24 |

Creative Button Styles Modern and subtle styles & effects for buttons (hover and click)

25 |
26 |
27 |

Note that on mobile devices the effects might not all work as intended.

28 |

29 | 30 | 31 | 32 |

33 |

34 | 35 | 36 | 37 |

38 |
39 |
40 |

41 | 42 | 43 |

44 |

45 | 46 | 47 |

48 |

49 | 50 | 51 |

52 |

53 | 54 | 55 |

56 |

57 | 58 | 59 |

60 |
61 |
62 |

63 | 64 | 65 |

66 |

67 | 68 |

69 |

70 | 71 | 72 |

73 |
74 |
75 |

76 | 77 | 78 |

79 |

80 | 81 | 82 |

83 |
84 |
85 |

86 | 87 | 88 | 89 |

90 |

91 | 92 | 93 | 94 |

95 |
96 |
97 |

98 | 99 | 100 | 101 |

102 |

103 | 104 | 105 | 106 |

107 |

108 | 109 | 110 | 111 |

112 |

113 | 114 | 115 | 116 |

117 |
118 |
119 |

Click on the buttons to see the effect

120 |

121 | 122 | 123 |

124 |

125 | 126 | 127 |

128 |

129 | 130 | 131 | 132 |

133 |

134 | 135 | 136 |

137 |
138 | 139 |
140 |
141 |
142 |
143 |
144 |
145 |

146 | 147 |

148 |

149 | 150 |

151 |
152 |

153 | 154 |

155 |

156 | 157 |

158 |

Click the following buttons to see the effect:

159 |

160 | 161 |

162 |

163 | 164 |

165 |
166 |

167 | 168 |

169 |

170 | 171 |

172 |
173 |
174 | 175 | 208 | 209 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f