├── README.md ├── css ├── btn1.css ├── btn2.css └── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | Hello Guys, 2 | 3 | This are some **Buttons Designs** to use in projects. You can see it [live here!](http://tilakjain123.github.io/Buttons/) 4 | 5 | If this link dosn't work see it [over here!](http://buttondesigns.netlify.app) 6 | 7 | There are different designs of **buttons** with different effects mainly: 8 | * Gradient Color Background 9 | * Hover effects 10 | * With icons 11 | * Icon effects 12 | * Click effects 13 | * Other: Like With Images as background, etc. 14 | #### Many other designs are yet left to add. 15 | 16 | #### There are few buttons now that have videos in background, coming soon.. 17 | 18 | ### You can use it in your projects! 19 | **Note:** I made two different css files for buttons 1st That contains css for Gradient Color Background, Hover effects, With icons 20 | 2nd That contains css for Icon effects, Click effects, Other: Like With Images as background, etc. 21 | ### If you see some fault or mistake, feel free to inform me. Thankyou!😉 22 | -------------------------------------------------------------------------------- /css/btn1.css: -------------------------------------------------------------------------------- 1 | /* Button design css starts here */ 2 | button { 3 | background-color: #cccccc; 4 | color: black; 5 | padding: 13px 17px !important; 6 | border: none; 7 | margin: 12px; 8 | outline: none; 9 | font-size: 19px; 10 | padding: 7px 14px; 11 | cursor: pointer; 12 | border-radius: 3px; 13 | text-decoration: none; 14 | } 15 | 16 | #bg1 { 17 | background: linear-gradient(to right, #9900cc 0%, #ff3399 100%); 18 | border: 1px solid rgb(207, 89, 113); 19 | } 20 | 21 | #bg2 { 22 | background: linear-gradient(to bottom, #0099cc 0%, #00ffff 100%); 23 | border: 1px solid darkturquoise; 24 | } 25 | 26 | #bg3 { 27 | background: linear-gradient(to right, #ffe600 0%, #96da17 100%); 28 | border: 1px solid green; 29 | } 30 | /* with hover starts here */ 31 | .hvr-underline-from-center { 32 | display: inline-block; 33 | vertical-align: middle; 34 | -webkit-transform: perspective(1px) translateZ(0); 35 | transform: perspective(1px) translateZ(0); 36 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 37 | position: relative; 38 | overflow: hidden; 39 | } 40 | 41 | /* underline from center */ 42 | .hvr-underline-from-center:before { 43 | content: ""; 44 | position: absolute; 45 | z-index: -1; 46 | left: 51%; 47 | right: 51%; 48 | bottom: 0; 49 | background: linear-gradient(to top, #6600ff 0%, #cc00cc 100%); 50 | height: 4px; 51 | -webkit-transition-property: left, right; 52 | transition-property: left, right; 53 | -webkit-transition-duration: 0.3s; 54 | transition-duration: 0.3s; 55 | -webkit-transition-timing-function: ease-out; 56 | transition-timing-function: ease-out; 57 | } 58 | 59 | .hvr-underline-from-center:hover:before, 60 | .hvr-underline-from-center:focus:before, 61 | .hvr-underline-from-center:active:before { 62 | left: 0; 63 | right: 0; 64 | } 65 | 66 | /* underline from left */ 67 | .hvr-underline-from-left { 68 | display: inline-block; 69 | vertical-align: middle; 70 | -webkit-transform: perspective(1px) translateZ(0); 71 | transform: perspective(1px) translateZ(0); 72 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 73 | position: relative; 74 | overflow: hidden; 75 | } 76 | 77 | .hvr-underline-from-left:before { 78 | content: ""; 79 | position: absolute; 80 | z-index: -1; 81 | left: 0; 82 | right: 100%; 83 | bottom: 0; 84 | background: linear-gradient(to right, #ff0066 0%, #990099 100%); 85 | height: 4px; 86 | -webkit-transition-property: right; 87 | transition-property: right; 88 | -webkit-transition-duration: 0.3s; 89 | transition-duration: 0.3s; 90 | -webkit-transition-timing-function: ease-out; 91 | transition-timing-function: ease-out; 92 | } 93 | 94 | .hvr-underline-from-left:hover:before, 95 | .hvr-underline-from-left:focus:before, 96 | .hvr-underline-from-left:active:before { 97 | right: 0; 98 | } 99 | 100 | /* Underline From Right */ 101 | .hvr-underline-from-right { 102 | display: inline-block; 103 | vertical-align: middle; 104 | -webkit-transform: perspective(1px) translateZ(0); 105 | transform: perspective(1px) translateZ(0); 106 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 107 | position: relative; 108 | overflow: hidden; 109 | } 110 | 111 | .hvr-underline-from-right:before { 112 | content: ""; 113 | position: absolute; 114 | z-index: -1; 115 | left: 100%; 116 | right: 0; 117 | bottom: 0; 118 | background: linear-gradient(147deg, #f71a1a, #8e610f); 119 | height: 4px; 120 | -webkit-transition-property: left; 121 | transition-property: left; 122 | -webkit-transition-duration: 0.3s; 123 | transition-duration: 0.3s; 124 | -webkit-transition-timing-function: ease-out; 125 | transition-timing-function: ease-out; 126 | } 127 | 128 | .hvr-underline-from-right:hover:before, 129 | .hvr-underline-from-right:focus:before, 130 | .hvr-underline-from-right:active:before { 131 | left: 0; 132 | } 133 | /* overline from center */ 134 | .hvr-overline-from-center { 135 | display: inline-block; 136 | vertical-align: middle; 137 | -webkit-transform: perspective(1px) translateZ(0); 138 | transform: perspective(1px) translateZ(0); 139 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 140 | position: relative; 141 | overflow: hidden; 142 | } 143 | 144 | .hvr-overline-from-center:before { 145 | content: ""; 146 | position: absolute; 147 | z-index: -1; 148 | left: 51%; 149 | right: 51%; 150 | top: 0; 151 | background: linear-gradient(35deg, #422a7d, #058da7); 152 | height: 4px; 153 | -webkit-transition-property: left, right; 154 | transition-property: left, right; 155 | -webkit-transition-duration: 0.3s; 156 | transition-duration: 0.3s; 157 | -webkit-transition-timing-function: ease-out; 158 | transition-timing-function: ease-out; 159 | } 160 | 161 | .hvr-overline-from-center:hover:before, 162 | .hvr-overline-from-center:focus:before, 163 | .hvr-overline-from-center:active:before { 164 | left: 0; 165 | right: 0; 166 | } 167 | /* overline from left */ 168 | .hvr-overline-from-left { 169 | display: inline-block; 170 | vertical-align: middle; 171 | -webkit-transform: perspective(1px) translateZ(0); 172 | transform: perspective(1px) translateZ(0); 173 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 174 | position: relative; 175 | overflow: hidden; 176 | } 177 | 178 | .hvr-overline-from-left:before { 179 | content: ""; 180 | position: absolute; 181 | z-index: -1; 182 | left: 0; 183 | right: 100%; 184 | top: 0; 185 | background: linear-gradient(35deg, #422a7d, #058da7); 186 | height: 4px; 187 | -webkit-transition-property: right; 188 | transition-property: right; 189 | -webkit-transition-duration: 0.3s; 190 | transition-duration: 0.3s; 191 | -webkit-transition-timing-function: ease-out; 192 | transition-timing-function: ease-out; 193 | } 194 | 195 | .hvr-overline-from-left:hover:before, 196 | .hvr-overline-from-left:focus:before, 197 | .hvr-overline-from-left:active:before { 198 | right: 0; 199 | } 200 | /* overline From Right */ 201 | .hvr-overline-from-right { 202 | display: inline-block; 203 | vertical-align: middle; 204 | -webkit-transform: perspective(1px) translateZ(0); 205 | transform: perspective(1px) translateZ(0); 206 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 207 | position: relative; 208 | overflow: hidden; 209 | } 210 | 211 | .hvr-overline-from-right:before { 212 | content: ""; 213 | position: absolute; 214 | z-index: -1; 215 | left: 100%; 216 | right: 0; 217 | top: 0; 218 | background: linear-gradient(35deg, #422a7d, #058da7); 219 | height: 4px; 220 | -webkit-transition-property: left; 221 | transition-property: left; 222 | -webkit-transition-duration: 0.3s; 223 | transition-duration: 0.3s; 224 | -webkit-transition-timing-function: ease-out; 225 | transition-timing-function: ease-out; 226 | } 227 | 228 | .hvr-overline-from-right:hover:before, 229 | .hvr-overline-from-right:focus:before, 230 | .hvr-overline-from-right:active:before { 231 | left: 0; 232 | } 233 | /* overlay starts here */ 234 | /* overlay from center */ 235 | .hvr-overlay-from-center { 236 | display: inline-block; 237 | vertical-align: middle; 238 | -webkit-transform: perspective(1px) translateZ(0); 239 | transform: perspective(1px) translateZ(0); 240 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 241 | position: relative; 242 | overflow: hidden; 243 | } 244 | 245 | .hvr-overlay-from-center:before { 246 | content: ""; 247 | position: absolute; 248 | z-index: -1; 249 | top: 51%; 250 | bottom: 51%; 251 | /* bottom: 0; */ 252 | right: 0; 253 | left: 0; 254 | background: linear-gradient(to top, #6600ff 0%, #cc00cc 100%); 255 | /* height: 4px; */ 256 | -webkit-transition-property: top, bottom; 257 | transition-property: top, bottom; 258 | -webkit-transition-duration: 0.3s; 259 | transition-duration: 0.3s; 260 | -webkit-transition-timing-function: ease-out; 261 | transition-timing-function: ease-out; 262 | } 263 | 264 | .hvr-overlay-from-center:hover:before, 265 | .hvr-overlay-from-center:focus:before, 266 | .hvr-overlay-from-center:active:before { 267 | top: 0; 268 | bottom: 0; 269 | } 270 | /* overlay from bottom */ 271 | .hvr-overlay-from-bottom { 272 | display: inline-block; 273 | vertical-align: middle; 274 | -webkit-transform: perspective(1px) translateZ(0); 275 | transform: perspective(1px) translateZ(0); 276 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 277 | position: relative; 278 | overflow: hidden; 279 | } 280 | 281 | .hvr-overlay-from-bottom:before { 282 | content: ""; 283 | position: absolute; 284 | z-index: -1; 285 | top: 100%; 286 | bottom: 0; 287 | right: 0; 288 | left: 0; 289 | background: linear-gradient(89deg, #5152f2, #5d6b90); 290 | -webkit-transition-property: top, bottom; 291 | transition-property: top, bottom; 292 | -webkit-transition-duration: 0.3s; 293 | transition-duration: 0.3s; 294 | -webkit-transition-timing-function: ease-out; 295 | transition-timing-function: ease-out; 296 | } 297 | 298 | .hvr-overlay-from-bottom:hover:before, 299 | .hvr-overlay-from-bottom:focus:before, 300 | .hvr-overlay-from-bottom:active:before { 301 | top: 0; 302 | bottom: 0; 303 | } 304 | /* overlay from top */ 305 | .hvr-overlay-from-top { 306 | display: inline-block; 307 | vertical-align: middle; 308 | -webkit-transform: perspective(1px) translateZ(0); 309 | transform: perspective(1px) translateZ(0); 310 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 311 | position: relative; 312 | overflow: hidden; 313 | } 314 | 315 | .hvr-overlay-from-top:before { 316 | content: ""; 317 | position: absolute; 318 | z-index: -1; 319 | top: 0; 320 | bottom: 100%; 321 | /* bottom: 0; */ 322 | right: 0; 323 | left: 0; 324 | background: linear-gradient(49deg, #244181, #e31648); 325 | /* height: 4px; */ 326 | -webkit-transition-property: bottom, top; 327 | transition-property: bottom, top; 328 | -webkit-transition-duration: 0.3s; 329 | transition-duration: 0.3s; 330 | -webkit-transition-timing-function: ease-out; 331 | transition-timing-function: ease-out; 332 | } 333 | 334 | .hvr-overlay-from-top:hover:before, 335 | .hvr-overlay-from-top:focus:before, 336 | .hvr-overlay-from-top:active:before { 337 | top: 0; 338 | bottom: 0; 339 | } 340 | /* overlay from left */ 341 | .hvr-overlay-from-left { 342 | display: inline-block; 343 | vertical-align: middle; 344 | -webkit-transform: perspective(1px) translateZ(0); 345 | transform: perspective(1px) translateZ(0); 346 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 347 | position: relative; 348 | overflow: hidden; 349 | } 350 | 351 | .hvr-overlay-from-left:before { 352 | content: ""; 353 | position: absolute; 354 | z-index: -1; 355 | left: 0; 356 | right: 100%; 357 | bottom: 0; 358 | background: linear-gradient(to right, #ff0066 0%, #990099 100%); 359 | height: 100%; 360 | -webkit-transition-property: right; 361 | transition-property: right; 362 | -webkit-transition-duration: 0.3s; 363 | transition-duration: 0.3s; 364 | -webkit-transition-timing-function: ease-out; 365 | transition-timing-function: ease-out; 366 | } 367 | 368 | .hvr-overlay-from-left:hover:before, 369 | .hvr-overlay-from-left:focus:before, 370 | .hvr-overlay-from-left:active:before { 371 | right: 0; 372 | } 373 | /* overlay From Right */ 374 | .hvr-overlay-from-right { 375 | display: inline-block; 376 | vertical-align: middle; 377 | -webkit-transform: perspective(1px) translateZ(0); 378 | transform: perspective(1px) translateZ(0); 379 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 380 | position: relative; 381 | overflow: hidden; 382 | } 383 | 384 | .hvr-overlay-from-right:before { 385 | content: ""; 386 | position: absolute; 387 | z-index: -1; 388 | left: 100%; 389 | right: 0; 390 | bottom: 0; 391 | background: linear-gradient(147deg, #f71a1a, #8e610f); 392 | height: 100%; 393 | -webkit-transition-property: left; 394 | transition-property: left; 395 | -webkit-transition-duration: 0.3s; 396 | transition-duration: 0.3s; 397 | -webkit-transition-timing-function: ease-out; 398 | transition-timing-function: ease-out; 399 | } 400 | 401 | .hvr-overlay-from-right:hover:before, 402 | .hvr-overlay-from-right:focus:before, 403 | .hvr-overlay-from-right:active:before { 404 | left: 0; 405 | } 406 | /* for glow hover */ 407 | .hvr-glow:hover { 408 | box-shadow: 0px 0px 10px black; 409 | transition: 0.4s; 410 | } 411 | 412 | .hvr-glow-inset:hover { 413 | box-shadow: inset 0px 0px 5px black; 414 | transition: 0.4s; 415 | } 416 | 417 | /* for running */ 418 | #running { 419 | position: relative; 420 | display: inline-block; 421 | overflow: hidden; 422 | transition: .5s; 423 | } 424 | 425 | #running:hover span { 426 | position: absolute; 427 | display: block; 428 | } 429 | 430 | #running:hover span:nth-child(1) { 431 | top: 0; 432 | left: -100%; 433 | width: 100%; 434 | height: 2px; 435 | background: linear-gradient(90deg, transparent, crimson); 436 | animation: btn-anim1 1s linear infinite; 437 | } 438 | 439 | @keyframes btn-anim1 { 440 | 0% { 441 | left: -100%; 442 | } 443 | 444 | 50%, 445 | 100% { 446 | left: 100%; 447 | } 448 | } 449 | 450 | #running:hover span:nth-child(2) { 451 | top: -100%; 452 | right: 0; 453 | width: 2px; 454 | height: 100%; 455 | background: linear-gradient(180deg, transparent, crimson); 456 | animation: btn-anim2 1s linear infinite; 457 | animation-delay: .25s 458 | } 459 | 460 | @keyframes btn-anim2 { 461 | 0% { 462 | top: -100%; 463 | } 464 | 465 | 50%, 466 | 100% { 467 | top: 100%; 468 | } 469 | } 470 | 471 | #running:hover span:nth-child(3) { 472 | bottom: 0; 473 | right: -100%; 474 | width: 100%; 475 | height: 2px; 476 | background: linear-gradient(270deg, transparent, crimson); 477 | animation: btn-anim3 1s linear infinite; 478 | animation-delay: .5s 479 | } 480 | 481 | @keyframes btn-anim3 { 482 | 0% { 483 | right: -100%; 484 | } 485 | 486 | 50%, 487 | 100% { 488 | right: 100%; 489 | } 490 | } 491 | 492 | #running:hover span:nth-child(4) { 493 | bottom: -100%; 494 | left: 0; 495 | width: 2px; 496 | height: 100%; 497 | background: linear-gradient(360deg, transparent, crimson); 498 | animation: btn-anim4 1s linear infinite; 499 | animation-delay: .75s 500 | } 501 | 502 | @keyframes btn-anim4 { 503 | 0% { 504 | bottom: -100%; 505 | } 506 | 507 | 50%, 508 | 100% { 509 | bottom: 100%; 510 | } 511 | } 512 | 513 | /* for glow on hover */ 514 | .glow-on-hover { 515 | color: black; 516 | background: #cccccc; 517 | position: relative; 518 | z-index: 0; 519 | } 520 | 521 | .glow-on-hover:before { 522 | content: ''; 523 | background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); 524 | position: absolute; 525 | top: -2px; 526 | left: -2px; 527 | background-size: 400%; 528 | z-index: -1; 529 | filter: blur(5px); 530 | width: calc(100% + 4px); 531 | height: calc(100% + 4px); 532 | animation: glowing 20s linear infinite; 533 | opacity: 0; 534 | transition: opacity .3s ease-in-out; 535 | } 536 | 537 | .glow-on-hover:active { 538 | color: #000 539 | } 540 | 541 | .glow-on-hover:hover:before { 542 | opacity: 1; 543 | } 544 | 545 | .glow-on-hover:after { 546 | z-index: -1; 547 | content: ''; 548 | position: absolute; 549 | width: 100%; 550 | height: 100%; 551 | background: #cccccc; 552 | left: 0; 553 | top: 0; 554 | } 555 | 556 | @keyframes glowing { 557 | 0% { 558 | background-position: 0 0; 559 | } 560 | 561 | 50% { 562 | background-position: 400% 0; 563 | } 564 | 565 | 100% { 566 | background-position: 0 0; 567 | } 568 | } 569 | 570 | 571 | #btn1-1 { 572 | border: 1px solid rgb(168, 13, 240); 573 | background: linear-gradient(to right, #cc33ff 0%, #0066cc 100%); 574 | } 575 | 576 | #btn1-1:hover { 577 | background: linear-gradient(to left, #cc33ff 0%, #0066cc 100%); 578 | } 579 | /* btn1-(2- 6) with only keyframe animation */ 580 | 581 | #btn1-2 { 582 | background: linear-gradient(to right, rgb(0, 204, 255) 0%, rgb(5, 218, 93) 100%); 583 | border: 1px solid rgb(17, 173, 88); 584 | } 585 | 586 | #btn1-2:hover { 587 | animation: btn2 1s infinite; 588 | } 589 | 590 | @keyframes btn2 { 591 | 0% { 592 | border: 1px solid crimson; 593 | } 594 | 595 | 25% { 596 | border: 1px solid rgb(149, 238, 16); 597 | } 598 | 599 | 50% { 600 | border: 1px solid darkviolet; 601 | } 602 | 603 | 75% { 604 | border: 1px solid orangered; 605 | } 606 | 607 | 100% { 608 | border: 1px solid rgb(27, 107, 107); 609 | } 610 | } 611 | 612 | #btn1-3 { 613 | background: linear-gradient(318deg, #e0b54b, #80a9ec); 614 | border: 1px solid rgb(170, 197, 183); 615 | /*border color is for demo only, you can use any other */ 616 | } 617 | 618 | #btn1-3:hover { 619 | animation: btn1-3 0.7s infinite; 620 | } 621 | 622 | @keyframes btn1-3 { 623 | 0% { 624 | background: linear-gradient(to left, #9900cc 0%, #ff3399 33%); 625 | } 626 | 627 | 25% { 628 | background: linear-gradient(to right, #9900cc 20%, #ff3399 60%); 629 | } 630 | 631 | 50% { 632 | background: linear-gradient(to left, #9900cc 31%, #ff3399 83%); 633 | } 634 | 635 | 75% { 636 | background: linear-gradient(to right, #9900cc 60%, #ff3399 97%); 637 | } 638 | 639 | 100% { 640 | background: linear-gradient(to left, #9900cc 68%, #ff3399 100%); 641 | } 642 | } 643 | 644 | #btn1-4 { 645 | background: linear-gradient(187deg, #93189c, #c733dd); 646 | } 647 | 648 | #btn1-4:hover { 649 | animation: btn1-4 0.7s infinite; 650 | } 651 | 652 | @keyframes btn1-4 { 653 | 0% { 654 | background: linear-gradient(30deg, #cad187, #a614f2); 655 | } 656 | 657 | 25% { 658 | background: linear-gradient(55deg, #cad187, #a614f2); 659 | } 660 | 661 | 50% { 662 | background: linear-gradient(85deg, #cad187, #a614f2); 663 | } 664 | 665 | 75% { 666 | background: linear-gradient(125deg, #cad187, #a614f2); 667 | } 668 | 669 | 100% { 670 | background: linear-gradient(145deg, #cad187, #a614f2); 671 | } 672 | } 673 | 674 | #btn1-5 { 675 | background: linear-gradient(140deg, #33f5ee, #6c2b83); 676 | } 677 | 678 | #btn1-5:hover { 679 | animation: btn1-5 0.8s infinite; 680 | } 681 | 682 | @keyframes btn1-5 { 683 | 0% { 684 | background: linear-gradient(360deg, #2af5ee, #6c2b83); 685 | } 686 | 687 | 25% { 688 | background: linear-gradient(300deg, #33f5ee, #6c2b83); 689 | } 690 | 691 | 50% { 692 | background: linear-gradient(240deg, #33f5ee, #6c2b83); 693 | } 694 | 695 | 75% { 696 | background: linear-gradient(180deg, #33f5ee, #6c2b83); 697 | } 698 | 699 | 100% { 700 | background: linear-gradient(120deg, #33f5ee, #6c2b83); 701 | } 702 | } 703 | #btn1-6:hover{ 704 | animation: btn1-6 0.7s infinite; 705 | } 706 | @keyframes btn1-6{ 707 | from{background: linear-gradient(34deg, #01b7ff, #0f8528);} 708 | to{background: linear-gradient(34deg, #0f8528, #01b7ff);} 709 | } -------------------------------------------------------------------------------- /css/btn2.css: -------------------------------------------------------------------------------- 1 | /* Icon animations from here */ 2 | /* icon animations no.1 */ 3 | .iconhover1{ 4 | padding: 10px; 5 | width: 120px; 6 | transition: all 0.5s; 7 | } 8 | 9 | .iconhover1 span{ 10 | cursor: pointer; 11 | display: inline-block; 12 | position: relative; 13 | transition: 0.5s; 14 | } 15 | .iconhover1 span:after { 16 | content: '\00bb'; 17 | position: absolute; 18 | opacity: 0; 19 | top: 0; 20 | right: -20px; 21 | transition: 0.5s; 22 | } 23 | .iconhover1:hover span{ 24 | padding-right: 25px; 25 | } 26 | 27 | .iconhover1:hover span:after{ 28 | opacity: 1; 29 | right: 0; 30 | } 31 | /* icon animation no. 2 */ 32 | 33 | /* Icon Wobble Horizontal */ 34 | @-webkit-keyframes hvr-icon-wobble-horizontal { 35 | 16.65% { 36 | -webkit-transform: translateX(6px); 37 | transform: translateX(6px); 38 | } 39 | 33.3% { 40 | -webkit-transform: translateX(-5px); 41 | transform: translateX(-5px); 42 | } 43 | 49.95% { 44 | -webkit-transform: translateX(4px); 45 | transform: translateX(4px); 46 | } 47 | 66.6% { 48 | -webkit-transform: translateX(-2px); 49 | transform: translateX(-2px); 50 | } 51 | 83.25% { 52 | -webkit-transform: translateX(1px); 53 | transform: translateX(1px); 54 | } 55 | 100% { 56 | -webkit-transform: translateX(0); 57 | transform: translateX(0); 58 | } 59 | } 60 | @keyframes hvr-icon-wobble-horizontal { 61 | 16.65% { 62 | -webkit-transform: translateX(6px); 63 | transform: translateX(6px); 64 | } 65 | 33.3% { 66 | -webkit-transform: translateX(-5px); 67 | transform: translateX(-5px); 68 | } 69 | 49.95% { 70 | -webkit-transform: translateX(4px); 71 | transform: translateX(4px); 72 | } 73 | 66.6% { 74 | -webkit-transform: translateX(-2px); 75 | transform: translateX(-2px); 76 | } 77 | 83.25% { 78 | -webkit-transform: translateX(1px); 79 | transform: translateX(1px); 80 | } 81 | 100% { 82 | -webkit-transform: translateX(0); 83 | transform: translateX(0); 84 | } 85 | } 86 | .iconhover2 { 87 | display: inline-block; 88 | vertical-align: middle; 89 | -webkit-transform: perspective(1px) translateZ(0); 90 | transform: perspective(1px) translateZ(0); 91 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 92 | -webkit-transition-duration: 0.3s; 93 | transition-duration: 0.3s; 94 | } 95 | .iconhover2 .hvr-icon { 96 | -webkit-transform: translateZ(0); 97 | transform: translateZ(0); 98 | } 99 | .iconhover2:hover .hvr-icon, .iconhover2:focus .hvr-icon, .iconhover2:active .hvr-icon { 100 | -webkit-animation-name: hvr-icon-wobble-horizontal; 101 | animation-name: hvr-icon-wobble-horizontal; 102 | -webkit-animation-duration: 1s; 103 | animation-duration: 1s; 104 | -webkit-animation-timing-function: ease-in-out; 105 | animation-timing-function: ease-in-out; 106 | -webkit-animation-iteration-count: 1; 107 | animation-iteration-count: 1; 108 | } 109 | 110 | 111 | /* For click animation series */ 112 | /* 1. click me animation */ 113 | .animate1 { 114 | box-shadow: 0 9px #999; 115 | } 116 | 117 | .animate1:hover { 118 | background-color: #c2bcbc 119 | } 120 | 121 | .animate1:active { 122 | background-color: dark grey; 123 | box-shadow: 0 5px #666; 124 | transform: translateY(4px); 125 | } 126 | 127 | /* animate2 click */ 128 | .animate2 { 129 | position: relative; 130 | -webkit-transition-duration: 0.4s; 131 | /* Safari */ 132 | transition-duration: 0.4s; 133 | overflow: hidden; 134 | } 135 | 136 | .animate2:after { 137 | content: ""; 138 | background: green; 139 | display: block; 140 | position: absolute; 141 | padding-top: 300%; 142 | padding-left: 350%; 143 | margin-left: -20px !important; 144 | margin-top: -120%; 145 | opacity: 0; 146 | transition: all 0.8s 147 | } 148 | 149 | .animate2:active:after { 150 | padding: 0; 151 | margin: 0; 152 | opacity: 1; 153 | transition: 0s 154 | } 155 | .animate3:active{ 156 | box-shadow: inset 0px 0px 20px 10px black; 157 | } 158 | /* Others */ 159 | #other1{ 160 | background-image: url(https://images.unsplash.com/photo-1635955174091-29d50f98e27d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1032&q=80); /*You can use any image (.png and .jpg recommended)*/ 161 | background-size: cover; /*to be full width and height as of button (you can also put own values)*/ 162 | color: white; 163 | } 164 | /* hvr to reveal(show) */ 165 | .hvr-show { 166 | display: inline-block; 167 | vertical-align: middle; 168 | -webkit-transform: perspective(1px) translateZ(0); 169 | transform: perspective(1px) translateZ(0); 170 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 171 | position: relative; 172 | overflow: hidden; 173 | } 174 | .hvr-show:before { 175 | content: "Revealed!"; /* Put your message here */ 176 | position: absolute; 177 | z-index: 1; 178 | left: 100%; 179 | color: white; 180 | right: 0; 181 | bottom: 0; 182 | top: 0; 183 | padding: 10px; 184 | background: linear-gradient(136deg, #e31e84, #b64913); 185 | height: 100%; 186 | -webkit-transition-property: left; 187 | transition-property: left; 188 | -webkit-transition-duration: 0.3s; 189 | transition-duration: 0.3s; 190 | -webkit-transition-timing-function: ease-out; 191 | transition-timing-function: ease-out; 192 | } 193 | 194 | .hvr-show:hover:before, 195 | .hvr-show:focus:before, 196 | .hvr-show:active:before { 197 | left: 0; 198 | } 199 | /* small message on hover*/ 200 | .hvr-message { 201 | display: inline-block; 202 | vertical-align: middle; 203 | -webkit-transform: perspective(1px) translateZ(0); 204 | transform: perspective(1px) translateZ(0); 205 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 206 | position: relative; 207 | overflow: hidden; 208 | } 209 | .hvr-message:before { 210 | content: "Message!"; /* Put your message here */ 211 | position: absolute; 212 | font-size: 15px; 213 | z-index: 1; 214 | left: 100%; 215 | color: rgb(255, 255, 255); 216 | right: 0; 217 | bottom: 0; 218 | background: linear-gradient(136deg, #e31e84, #b64913); 219 | height: 30%; 220 | -webkit-transition-property: left; 221 | transition-property: left; 222 | -webkit-transition-duration: 0.3s; 223 | transition-duration: 0.3s; 224 | -webkit-transition-timing-function: ease-out; 225 | transition-timing-function: ease-out; 226 | } 227 | 228 | .hvr-message:hover:before, 229 | .hvr-message:focus:before, 230 | .hvr-message:active:before { 231 | left: 0; 232 | } 233 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | padding: 10px 0 0 0; 9 | line-height: 140%; 10 | /* background-color: rgb(34, 32, 32); */ 11 | /*Only for production*/ 12 | /* color: white; */ 13 | } 14 | #contribute{ 15 | right: 0; 16 | margin-right: 20px; 17 | font-size: 50px; 18 | transform: rotate(30deg); 19 | color: rgb(0, 0, 0); 20 | position: fixed; 21 | } 22 | #message{ 23 | display: none; 24 | right: 0; 25 | margin-top: 50px; 26 | margin-right: 30px; 27 | background: linear-gradient(94deg, #1dd3ce, #ebf710); 28 | border-radius: 10px; 29 | color: black; 30 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 31 | padding: 3px; 32 | border-top-right-radius: 0; 33 | position: fixed; 34 | } 35 | 36 | .main{ 37 | width: 70%; 38 | line-height: 60px; 39 | padding: 0 0 3px 3px; 40 | margin: 0px auto; 41 | } 42 | @media only screen and (max-width:600px){ 43 | .main{ 44 | width: 100%; 45 | } 46 | #contribute{ 47 | font-size: 35px; 48 | } 49 | } 50 | label { 51 | font-family: sans-serif; 52 | font-size: 19px; 53 | } 54 | hr{opacity: 0.7;} 55 | a{ 56 | text-decoration: none; 57 | color: rgb(32, 32, 241); 58 | } 59 | #featuring{ 60 | margin-top: 40px; 61 | justify-content: center; 62 | bottom: 0; 63 | } 64 | #featuring .feature{ 65 | font-size: 20px; 66 | } 67 | #featuring i{ 68 | font-size: 20px; 69 | color: rgb(0, 0, 0); 70 | } 71 | #featuring li{ 72 | list-style: none; 73 | } 74 | #featuring #quick-links { 75 | background-color: rgb(14, 13, 13); 76 | text-align: left; 77 | color: white; 78 | padding: 30px; 79 | min-height: 100px; 80 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 81 | } 82 | #quick-links a{ 83 | color: rgb(255, 187, 0); 84 | font-family: cursive; 85 | } 86 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Button Animations 14 | 15 | 16 | 17 |
18 |
Fork Me on Github?
19 |
20 |

Button designs | Only CSS

21 | 22 |
23 | 24 | 25 |
26 |

For gradient you can use W3 27 | School's gradient color genrator

28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 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 | Still thinking more? Want to Contribute?   92 | Go to Github
93 | Icons by FontAwesome 94 | 100 |
101 | 102 | 103 | 104 | 105 | 106 | --------------------------------------------------------------------------------