├── .gitignore ├── LICENSE ├── README.md ├── css └── hoverbuttons.css ├── demo ├── backgrounds │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── hb2.jpg ├── css │ ├── core.css │ ├── style.css │ └── style.scss └── js │ ├── functions.js │ └── jquery-3.2.1.min.js ├── index.html ├── package.json ├── scss ├── _base.scss ├── _variables.scss ├── hoverbuttons.scss └── transitions │ ├── border │ ├── _border.scss │ ├── _set01.scss │ ├── _set02.scss │ ├── _set03.scss │ ├── _set04.scss │ ├── _set05.scss │ └── _set06.scss │ └── fill │ ├── _fill.scss │ ├── _set01.scss │ ├── _set02.scss │ ├── _set03.scss │ └── _set04.scss ├── webpack.config.js └── webpack.mix.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .idea 61 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Kamil Kuklinski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hover-Buttons 2 | Hover Transition CSS/SCSS Buttons 3 |
4 | ## [DEMO/CHEATSHEET](https://varin6.github.io/Hover-Buttons/) 5 |
6 | 7 | ## How to use? 8 | 9 | ### Option 1 (Super quick) 10 | - [Click here for a cheatsheet](https://varin6.github.io/Hover-Buttons/) 11 | - Click on the button you like and copy styles and markup. 12 | 13 | 14 | ### Option 2 (Quick) 15 | - Download repo 16 | - Add `hoverbuttons.css` to your project 17 | - [Click here for a cheatsheet](https://varin6.github.io/Hover-Buttons/) 18 | 19 | ### Option 3 (SCSS) 20 | - Download repo 21 | - `npm install` 22 | - `npm run watch` if you want it to watch and compile your SCSS as you work on it 23 | - Comment out sets you don't need in `/scss/hoverbuttons.scss` 24 | - Adjust your variables in `/scss/_variables.scss` 25 | - Compile by running `npm run prod` or `npm run dev` and add the `hoverbuttons.css` file to your project 26 | 27 |
28 | 29 | I will be adding more and more buttons as time goes on... 30 |
31 | Collaboration welcome :) 32 | 33 | -------------------------------------------------------------------------------- /css/hoverbuttons.css: -------------------------------------------------------------------------------- 1 | .hbtn { 2 | position: relative; 3 | box-sizing: border-box; 4 | display: inline-block; 5 | overflow: hidden; 6 | padding: 8px 20px; 7 | margin: 0 3px 6px 3px; 8 | text-align: center; 9 | border: solid 2px #ffffff; 10 | text-decoration: none; 11 | color: #ffffff; 12 | white-space: nowrap; 13 | z-index: 0; 14 | } 15 | 16 | .hbtn i { 17 | padding-right: 8px; 18 | } 19 | 20 | .hpill { 21 | border-radius: 50px; 22 | } 23 | 24 | .hbtn.hb-fill-on:before { 25 | position: absolute; 26 | content: ''; 27 | background: #ffffff; 28 | transition-duration: .3s; 29 | z-index: -1; 30 | top: 0; 31 | right: auto; 32 | bottom: auto; 33 | left: 0; 34 | width: 100%; 35 | height: 100%; 36 | opacity: 0; 37 | } 38 | 39 | .hbtn.hb-fill-on:hover:before { 40 | width: 100%; 41 | height: 100%; 42 | opacity: 1; 43 | } 44 | 45 | .hbtn.hb-fill-bottom:before { 46 | position: absolute; 47 | content: ''; 48 | background: #ffffff; 49 | transition-duration: .3s; 50 | z-index: -1; 51 | top: 0; 52 | right: auto; 53 | bottom: auto; 54 | left: 0; 55 | width: 100%; 56 | height: 0; 57 | opacity: 1; 58 | } 59 | 60 | .hbtn.hb-fill-bottom:hover:before { 61 | width: 100%; 62 | height: 100%; 63 | opacity: 1; 64 | } 65 | 66 | .hbtn.hb-fill-left:before { 67 | position: absolute; 68 | content: ''; 69 | background: #ffffff; 70 | transition-duration: .3s; 71 | z-index: -1; 72 | top: 0; 73 | right: 0; 74 | bottom: auto; 75 | left: auto; 76 | width: 0; 77 | height: 100%; 78 | opacity: 1; 79 | } 80 | 81 | .hbtn.hb-fill-left:hover:before { 82 | width: 100%; 83 | height: 100%; 84 | opacity: 1; 85 | } 86 | 87 | .hbtn.hb-fill-top:before { 88 | position: absolute; 89 | content: ''; 90 | background: #ffffff; 91 | transition-duration: .3s; 92 | z-index: -1; 93 | top: auto; 94 | right: auto; 95 | bottom: 0; 96 | left: 0; 97 | width: 100%; 98 | height: 0; 99 | opacity: 1; 100 | } 101 | 102 | .hbtn.hb-fill-top:hover:before { 103 | width: 100%; 104 | height: 100%; 105 | opacity: 1; 106 | } 107 | 108 | .hbtn.hb-fill-right:before { 109 | position: absolute; 110 | content: ''; 111 | background: #ffffff; 112 | transition-duration: .3s; 113 | z-index: -1; 114 | top: 0; 115 | right: auto; 116 | bottom: auto; 117 | left: 0; 118 | width: 0; 119 | height: 100%; 120 | opacity: 1; 121 | } 122 | 123 | .hbtn.hb-fill-right:hover:before { 124 | width: 100%; 125 | height: 100%; 126 | opacity: 1; 127 | } 128 | 129 | .hbtn.hb-fill-middle:before { 130 | position: absolute; 131 | content: ''; 132 | background: #ffffff; 133 | transition-duration: .3s; 134 | z-index: -1; 135 | top: auto; 136 | right: auto; 137 | bottom: 0; 138 | left: 0; 139 | width: 100%; 140 | height: 0; 141 | opacity: 1; 142 | } 143 | 144 | .hbtn.hb-fill-middle:hover:before { 145 | width: 100%; 146 | height: 50%; 147 | opacity: 1; 148 | } 149 | 150 | .hbtn.hb-fill-middle2:before { 151 | position: absolute; 152 | content: ''; 153 | background: #ffffff; 154 | transition-duration: .3s; 155 | z-index: -1; 156 | top: 0; 157 | right: 0; 158 | bottom: auto; 159 | left: auto; 160 | width: 0; 161 | height: 100%; 162 | opacity: 1; 163 | } 164 | 165 | .hbtn.hb-fill-middle2:hover:before { 166 | width: 50%; 167 | height: 100%; 168 | opacity: 1; 169 | } 170 | 171 | .hbtn.hb-fill-on-rev:before { 172 | position: absolute; 173 | content: ''; 174 | background: #ffffff; 175 | transition-duration: .3s; 176 | z-index: -1; 177 | top: 0; 178 | right: auto; 179 | bottom: auto; 180 | left: 0; 181 | width: 100%; 182 | height: 100%; 183 | opacity: 1; 184 | } 185 | 186 | .hbtn.hb-fill-on-rev:hover:before { 187 | width: 100%; 188 | height: 100%; 189 | opacity: 0; 190 | } 191 | 192 | .hbtn.hb-fill-bottom-rev:before { 193 | position: absolute; 194 | content: ''; 195 | background: #ffffff; 196 | transition-duration: .3s; 197 | z-index: -1; 198 | top: 0; 199 | right: auto; 200 | bottom: auto; 201 | left: 0; 202 | width: 100%; 203 | height: 100%; 204 | opacity: 1; 205 | } 206 | 207 | .hbtn.hb-fill-bottom-rev:hover:before { 208 | width: 100%; 209 | height: 0; 210 | opacity: 1; 211 | } 212 | 213 | .hbtn.hb-fill-left-rev:before { 214 | position: absolute; 215 | content: ''; 216 | background: #ffffff; 217 | transition-duration: .3s; 218 | z-index: -1; 219 | top: 0; 220 | right: 0; 221 | bottom: auto; 222 | left: auto; 223 | width: 100%; 224 | height: 100%; 225 | opacity: 1; 226 | } 227 | 228 | .hbtn.hb-fill-left-rev:hover:before { 229 | width: 0; 230 | height: 100%; 231 | opacity: 1; 232 | } 233 | 234 | .hbtn.hb-fill-top-rev:before { 235 | position: absolute; 236 | content: ''; 237 | background: #ffffff; 238 | transition-duration: .3s; 239 | z-index: -1; 240 | top: auto; 241 | right: auto; 242 | bottom: 0; 243 | left: 0; 244 | width: 100%; 245 | height: 100%; 246 | opacity: 1; 247 | } 248 | 249 | .hbtn.hb-fill-top-rev:hover:before { 250 | width: 100%; 251 | height: 0; 252 | opacity: 1; 253 | } 254 | 255 | .hbtn.hb-fill-right-rev:before { 256 | position: absolute; 257 | content: ''; 258 | background: #ffffff; 259 | transition-duration: .3s; 260 | z-index: -1; 261 | top: 0; 262 | right: auto; 263 | bottom: auto; 264 | left: 0; 265 | width: 100%; 266 | height: 100%; 267 | opacity: 1; 268 | } 269 | 270 | .hbtn.hb-fill-right-rev:hover:before { 271 | width: 0; 272 | height: 100%; 273 | opacity: 1; 274 | } 275 | 276 | .hbtn.hb-fill-middle-rev:before { 277 | position: absolute; 278 | content: ''; 279 | background: #ffffff; 280 | transition-duration: .3s; 281 | z-index: -1; 282 | top: auto; 283 | right: auto; 284 | bottom: 0; 285 | left: 0; 286 | width: 100%; 287 | height: 50%; 288 | opacity: 1; 289 | } 290 | 291 | .hbtn.hb-fill-middle-rev:hover:before { 292 | width: 100%; 293 | height: 0%; 294 | opacity: 1; 295 | } 296 | 297 | .hbtn.hb-fill-middle2-rev:before { 298 | position: absolute; 299 | content: ''; 300 | background: #ffffff; 301 | transition-duration: .3s; 302 | z-index: -1; 303 | top: 0; 304 | right: 0; 305 | bottom: auto; 306 | left: auto; 307 | width: 50%; 308 | height: 100%; 309 | opacity: 1; 310 | } 311 | 312 | .hbtn.hb-fill-middle2-rev:hover:before { 313 | width: 0; 314 | height: 100%; 315 | opacity: 1; 316 | } 317 | 318 | .hb-fill-top, .hb-fill-right, .hb-fill-bottom, .hb-fill-left, .hb-fill-on, .hb-fill-middle, .hb-fill-middle2 { 319 | background: transparent; 320 | color: #ffffff; 321 | transition: color 0.3s ease, background 0s ease; 322 | } 323 | 324 | .hb-fill-top:hover, .hb-fill-right:hover, .hb-fill-bottom:hover, .hb-fill-left:hover, .hb-fill-on:hover, .hb-fill-middle:hover, .hb-fill-middle2:hover { 325 | color: #000000; 326 | background: #ffffff; 327 | transition: color 0.3s ease, background 0s 0.3s ease; 328 | } 329 | 330 | .hb-fill-top-rev, .hb-fill-right-rev, .hb-fill-bottom-rev, .hb-fill-left-rev, .hb-fill-on-rev, .hb-fill-middle-rev, .hb-fill-middle2-rev { 331 | background: #ffffff; 332 | color: #000000; 333 | transition: color 0.3s ease, background 0s 0.3s ease; 334 | } 335 | 336 | .hb-fill-top-rev:hover, .hb-fill-right-rev:hover, .hb-fill-bottom-rev:hover, .hb-fill-left-rev:hover, .hb-fill-on-rev:hover, .hb-fill-middle-rev:hover, .hb-fill-middle2-rev:hover { 337 | background: transparent; 338 | color: #ffffff; 339 | transition: color 0.3s ease, background 0s ease; 340 | } 341 | 342 | .hb-fill-middle:after { 343 | position: absolute; 344 | content: ''; 345 | background: #ffffff; 346 | transition-duration: .3s; 347 | z-index: -1; 348 | top: 0; 349 | right: auto; 350 | bottom: auto; 351 | left: 0; 352 | width: 100%; 353 | height: 0; 354 | opacity: 1; 355 | } 356 | 357 | .hb-fill-middle:hover:after { 358 | height: 50%; 359 | } 360 | 361 | .hb-fill-middle-rev:after { 362 | position: absolute; 363 | content: ''; 364 | background: #ffffff; 365 | transition-duration: .3s; 366 | z-index: -1; 367 | top: 0; 368 | right: auto; 369 | bottom: auto; 370 | left: 0; 371 | width: 100%; 372 | height: 50%; 373 | opacity: 1; 374 | } 375 | 376 | .hb-fill-middle-rev:hover:after { 377 | height: 0; 378 | } 379 | 380 | .hb-fill-middle2:after { 381 | position: absolute; 382 | content: ''; 383 | background: #ffffff; 384 | transition-duration: .3s; 385 | z-index: -1; 386 | top: 0; 387 | right: auto; 388 | bottom: auto; 389 | left: 0; 390 | width: 0; 391 | height: 100%; 392 | opacity: 1; 393 | } 394 | 395 | .hb-fill-middle2:hover:after { 396 | width: 50%; 397 | } 398 | 399 | .hb-fill-middle2-rev:after { 400 | position: absolute; 401 | content: ''; 402 | background: #ffffff; 403 | transition-duration: .3s; 404 | z-index: -1; 405 | top: 0; 406 | right: auto; 407 | bottom: auto; 408 | left: 0; 409 | width: 50%; 410 | height: 100%; 411 | opacity: 1; 412 | } 413 | 414 | .hb-fill-middle2-rev:hover:after { 415 | width: 0; 416 | } 417 | 418 | .hbtn.hb-fill-on-bg:before { 419 | position: absolute; 420 | content: ''; 421 | background: #ffffff; 422 | transition-duration: .3s; 423 | z-index: -1; 424 | top: 0; 425 | right: auto; 426 | bottom: auto; 427 | left: 0; 428 | width: 100%; 429 | height: 100%; 430 | opacity: 0; 431 | } 432 | 433 | .hbtn.hb-fill-on-bg:hover:before { 434 | width: 100%; 435 | height: 100%; 436 | opacity: 1; 437 | } 438 | 439 | .hbtn.hb-fill-bottom-bg:before { 440 | position: absolute; 441 | content: ''; 442 | background: #ffffff; 443 | transition-duration: .3s; 444 | z-index: -1; 445 | top: 0; 446 | right: auto; 447 | bottom: auto; 448 | left: 0; 449 | width: 100%; 450 | height: 0; 451 | opacity: 1; 452 | } 453 | 454 | .hbtn.hb-fill-bottom-bg:hover:before { 455 | width: 100%; 456 | height: 100%; 457 | opacity: 1; 458 | } 459 | 460 | .hbtn.hb-fill-left-bg:before { 461 | position: absolute; 462 | content: ''; 463 | background: #ffffff; 464 | transition-duration: .3s; 465 | z-index: -1; 466 | top: 0; 467 | right: 0; 468 | bottom: auto; 469 | left: auto; 470 | width: 0; 471 | height: 100%; 472 | opacity: 1; 473 | } 474 | 475 | .hbtn.hb-fill-left-bg:hover:before { 476 | width: 100%; 477 | height: 100%; 478 | opacity: 1; 479 | } 480 | 481 | .hbtn.hb-fill-top-bg:before { 482 | position: absolute; 483 | content: ''; 484 | background: #ffffff; 485 | transition-duration: .3s; 486 | z-index: -1; 487 | top: auto; 488 | right: auto; 489 | bottom: 0; 490 | left: 0; 491 | width: 100%; 492 | height: 0; 493 | opacity: 1; 494 | } 495 | 496 | .hbtn.hb-fill-top-bg:hover:before { 497 | width: 100%; 498 | height: 100%; 499 | opacity: 1; 500 | } 501 | 502 | .hbtn.hb-fill-right-bg:before { 503 | position: absolute; 504 | content: ''; 505 | background: #ffffff; 506 | transition-duration: .3s; 507 | z-index: -1; 508 | top: 0; 509 | right: auto; 510 | bottom: auto; 511 | left: 0; 512 | width: 0; 513 | height: 100%; 514 | opacity: 1; 515 | } 516 | 517 | .hbtn.hb-fill-right-bg:hover:before { 518 | width: 100%; 519 | height: 100%; 520 | opacity: 1; 521 | } 522 | 523 | .hbtn.hb-fill-middle-bg:before { 524 | position: absolute; 525 | content: ''; 526 | background: #ffffff; 527 | transition-duration: .3s; 528 | z-index: -1; 529 | top: auto; 530 | right: auto; 531 | bottom: 0; 532 | left: 0; 533 | width: 100%; 534 | height: 0; 535 | opacity: 1; 536 | } 537 | 538 | .hbtn.hb-fill-middle-bg:hover:before { 539 | width: 100%; 540 | height: 50%; 541 | opacity: 1; 542 | } 543 | 544 | .hbtn.hb-fill-middle2-bg:before { 545 | position: absolute; 546 | content: ''; 547 | background: #ffffff; 548 | transition-duration: .3s; 549 | z-index: -1; 550 | top: 0; 551 | right: 0; 552 | bottom: auto; 553 | left: auto; 554 | width: 0; 555 | height: 100%; 556 | opacity: 1; 557 | } 558 | 559 | .hbtn.hb-fill-middle2-bg:hover:before { 560 | width: 50%; 561 | height: 100%; 562 | opacity: 1; 563 | } 564 | 565 | .hbtn.hb-fill-on-rev-bg:before { 566 | position: absolute; 567 | content: ''; 568 | background: #ffffff; 569 | transition-duration: .3s; 570 | z-index: -1; 571 | top: 0; 572 | right: auto; 573 | bottom: auto; 574 | left: 0; 575 | width: 100%; 576 | height: 100%; 577 | opacity: 1; 578 | } 579 | 580 | .hbtn.hb-fill-on-rev-bg:hover:before { 581 | width: 100%; 582 | height: 100%; 583 | opacity: 0; 584 | } 585 | 586 | .hbtn.hb-fill-bottom-rev-bg:before { 587 | position: absolute; 588 | content: ''; 589 | background: #ffffff; 590 | transition-duration: .3s; 591 | z-index: -1; 592 | top: 0; 593 | right: auto; 594 | bottom: auto; 595 | left: 0; 596 | width: 100%; 597 | height: 100%; 598 | opacity: 1; 599 | } 600 | 601 | .hbtn.hb-fill-bottom-rev-bg:hover:before { 602 | width: 100%; 603 | height: 0; 604 | opacity: 1; 605 | } 606 | 607 | .hbtn.hb-fill-left-rev-bg:before { 608 | position: absolute; 609 | content: ''; 610 | background: #ffffff; 611 | transition-duration: .3s; 612 | z-index: -1; 613 | top: 0; 614 | right: 0; 615 | bottom: auto; 616 | left: auto; 617 | width: 100%; 618 | height: 100%; 619 | opacity: 1; 620 | } 621 | 622 | .hbtn.hb-fill-left-rev-bg:hover:before { 623 | width: 0; 624 | height: 100%; 625 | opacity: 1; 626 | } 627 | 628 | .hbtn.hb-fill-top-rev-bg:before { 629 | position: absolute; 630 | content: ''; 631 | background: #ffffff; 632 | transition-duration: .3s; 633 | z-index: -1; 634 | top: auto; 635 | right: auto; 636 | bottom: 0; 637 | left: 0; 638 | width: 100%; 639 | height: 100%; 640 | opacity: 1; 641 | } 642 | 643 | .hbtn.hb-fill-top-rev-bg:hover:before { 644 | width: 100%; 645 | height: 0; 646 | opacity: 1; 647 | } 648 | 649 | .hbtn.hb-fill-right-rev-bg:before { 650 | position: absolute; 651 | content: ''; 652 | background: #ffffff; 653 | transition-duration: .3s; 654 | z-index: -1; 655 | top: 0; 656 | right: auto; 657 | bottom: auto; 658 | left: 0; 659 | width: 100%; 660 | height: 100%; 661 | opacity: 1; 662 | } 663 | 664 | .hbtn.hb-fill-right-rev-bg:hover:before { 665 | width: 0; 666 | height: 100%; 667 | opacity: 1; 668 | } 669 | 670 | .hbtn.hb-fill-middle-rev-bg:before { 671 | position: absolute; 672 | content: ''; 673 | background: #ffffff; 674 | transition-duration: .3s; 675 | z-index: -1; 676 | top: auto; 677 | right: auto; 678 | bottom: 0; 679 | left: 0; 680 | width: 100%; 681 | height: 50%; 682 | opacity: 1; 683 | } 684 | 685 | .hbtn.hb-fill-middle-rev-bg:hover:before { 686 | width: 100%; 687 | height: 0%; 688 | opacity: 1; 689 | } 690 | 691 | .hbtn.hb-fill-middle2-rev-bg:before { 692 | position: absolute; 693 | content: ''; 694 | background: #ffffff; 695 | transition-duration: .3s; 696 | z-index: -1; 697 | top: 0; 698 | right: 0; 699 | bottom: auto; 700 | left: auto; 701 | width: 50%; 702 | height: 100%; 703 | opacity: 1; 704 | } 705 | 706 | .hbtn.hb-fill-middle2-rev-bg:hover:before { 707 | width: 0; 708 | height: 100%; 709 | opacity: 1; 710 | } 711 | 712 | .hb-fill-top-bg, .hb-fill-right-bg, .hb-fill-bottom-bg, .hb-fill-left-bg, .hb-fill-on-bg, .hb-fill-middle-bg, .hb-fill-middle2-bg { 713 | background: transparent; 714 | color: #ffffff; 715 | transition: all 0.3s ease; 716 | } 717 | 718 | .hb-fill-top-bg:hover, .hb-fill-right-bg:hover, .hb-fill-bottom-bg:hover, .hb-fill-left-bg:hover, .hb-fill-on-bg:hover, .hb-fill-middle-bg:hover, .hb-fill-middle2-bg:hover { 719 | color: #000000; 720 | background: #ffffff; 721 | transition: all 0.3s ease; 722 | } 723 | 724 | .hb-fill-top-rev-bg, .hb-fill-right-rev-bg, .hb-fill-bottom-rev-bg, .hb-fill-left-rev-bg, .hb-fill-on-rev-bg, .hb-fill-middle-rev-bg, .hb-fill-middle2-rev-bg { 725 | background: #ffffff; 726 | color: #000000; 727 | transition: all 0.3s ease; 728 | } 729 | 730 | .hb-fill-top-rev-bg:hover, .hb-fill-right-rev-bg:hover, .hb-fill-bottom-rev-bg:hover, .hb-fill-left-rev-bg:hover, .hb-fill-on-rev-bg:hover, .hb-fill-middle-rev-bg:hover, .hb-fill-middle2-rev-bg:hover { 731 | background: transparent; 732 | color: #ffffff; 733 | transition: all 0.3s ease; 734 | } 735 | 736 | .hb-fill-middle-bg:after { 737 | position: absolute; 738 | content: ''; 739 | background: #ffffff; 740 | transition-duration: .3s; 741 | z-index: -1; 742 | top: 0; 743 | right: auto; 744 | bottom: auto; 745 | left: 0; 746 | width: 100%; 747 | height: 0; 748 | opacity: 1; 749 | } 750 | 751 | .hb-fill-middle-bg:hover:after { 752 | height: 50%; 753 | } 754 | 755 | .hb-fill-middle-rev-bg:after { 756 | position: absolute; 757 | content: ''; 758 | background: #ffffff; 759 | transition-duration: .3s; 760 | z-index: -1; 761 | top: 0; 762 | right: auto; 763 | bottom: auto; 764 | left: 0; 765 | width: 100%; 766 | height: 50%; 767 | opacity: 1; 768 | } 769 | 770 | .hb-fill-middle-rev-bg:hover:after { 771 | height: 0; 772 | } 773 | 774 | .hb-fill-middle2-bg:after { 775 | position: absolute; 776 | content: ''; 777 | background: #ffffff; 778 | transition-duration: .3s; 779 | z-index: -1; 780 | top: 0; 781 | right: auto; 782 | bottom: auto; 783 | left: 0; 784 | width: 0; 785 | height: 100%; 786 | opacity: 1; 787 | } 788 | 789 | .hb-fill-middle2-bg:hover:after { 790 | width: 50%; 791 | } 792 | 793 | .hb-fill-middle2-rev-bg:after { 794 | position: absolute; 795 | content: ''; 796 | background: #ffffff; 797 | transition-duration: .3s; 798 | z-index: -1; 799 | top: 0; 800 | right: auto; 801 | bottom: auto; 802 | left: 0; 803 | width: 50%; 804 | height: 100%; 805 | opacity: 1; 806 | } 807 | 808 | .hb-fill-middle2-rev-bg:hover:after { 809 | width: 0; 810 | } 811 | 812 | .hbtn.hb-fill-on-br:before { 813 | position: absolute; 814 | content: ''; 815 | background: #ffffff; 816 | transition-duration: .3s; 817 | z-index: -1; 818 | top: 0; 819 | right: auto; 820 | bottom: auto; 821 | left: 0; 822 | width: 100%; 823 | height: 100%; 824 | opacity: 0; 825 | border: solid 2px #ffffff; 826 | } 827 | 828 | .hbtn.hb-fill-on-br:hover:before { 829 | width: 100%; 830 | height: 100%; 831 | opacity: 1; 832 | } 833 | 834 | .hbtn.hb-fill-bottom-br:before { 835 | position: absolute; 836 | content: ''; 837 | background: #ffffff; 838 | transition-duration: .3s; 839 | z-index: -1; 840 | top: 0; 841 | right: auto; 842 | bottom: auto; 843 | left: 0; 844 | width: 100%; 845 | height: 0; 846 | opacity: 1; 847 | border: solid 2px #ffffff; 848 | } 849 | 850 | .hbtn.hb-fill-bottom-br:hover:before { 851 | width: 100%; 852 | height: 100%; 853 | opacity: 1; 854 | } 855 | 856 | .hbtn.hb-fill-left-br:before { 857 | position: absolute; 858 | content: ''; 859 | background: #ffffff; 860 | transition-duration: .3s; 861 | z-index: -1; 862 | top: 0; 863 | right: 0; 864 | bottom: auto; 865 | left: auto; 866 | width: 0; 867 | height: 100%; 868 | opacity: 1; 869 | border: solid 2px #ffffff; 870 | } 871 | 872 | .hbtn.hb-fill-left-br:hover:before { 873 | width: 100%; 874 | height: 100%; 875 | opacity: 1; 876 | } 877 | 878 | .hbtn.hb-fill-top-br:before { 879 | position: absolute; 880 | content: ''; 881 | background: #ffffff; 882 | transition-duration: .3s; 883 | z-index: -1; 884 | top: auto; 885 | right: auto; 886 | bottom: 0; 887 | left: 0; 888 | width: 100%; 889 | height: 0; 890 | opacity: 1; 891 | border: solid 2px #ffffff; 892 | } 893 | 894 | .hbtn.hb-fill-top-br:hover:before { 895 | width: 100%; 896 | height: 100%; 897 | opacity: 1; 898 | } 899 | 900 | .hbtn.hb-fill-right-br:before { 901 | position: absolute; 902 | content: ''; 903 | background: #ffffff; 904 | transition-duration: .3s; 905 | z-index: -1; 906 | top: 0; 907 | right: auto; 908 | bottom: auto; 909 | left: 0; 910 | width: 0; 911 | height: 100%; 912 | opacity: 1; 913 | border: solid 2px #ffffff; 914 | } 915 | 916 | .hbtn.hb-fill-right-br:hover:before { 917 | width: 100%; 918 | height: 100%; 919 | opacity: 1; 920 | } 921 | 922 | .hbtn.hb-fill-middle-br:before { 923 | position: absolute; 924 | content: ''; 925 | background: #ffffff; 926 | transition-duration: .3s; 927 | z-index: -1; 928 | top: auto; 929 | right: auto; 930 | bottom: 0; 931 | left: 0; 932 | width: 100%; 933 | height: 0; 934 | opacity: 1; 935 | border: solid 2px #ffffff; 936 | } 937 | 938 | .hbtn.hb-fill-middle-br:hover:before { 939 | width: 100%; 940 | height: 50%; 941 | opacity: 1; 942 | } 943 | 944 | .hbtn.hb-fill-middle2-br:before { 945 | position: absolute; 946 | content: ''; 947 | background: #ffffff; 948 | transition-duration: .3s; 949 | z-index: -1; 950 | top: 0; 951 | right: 0; 952 | bottom: auto; 953 | left: auto; 954 | width: 0; 955 | height: 100%; 956 | opacity: 1; 957 | border: solid 2px #ffffff; 958 | } 959 | 960 | .hbtn.hb-fill-middle2-br:hover:before { 961 | width: 50%; 962 | height: 100%; 963 | opacity: 1; 964 | } 965 | 966 | .hbtn.hb-fill-on-rev-br:before { 967 | position: absolute; 968 | content: ''; 969 | background: #ffffff; 970 | transition-duration: .3s; 971 | z-index: -1; 972 | top: 0; 973 | right: auto; 974 | bottom: auto; 975 | left: 0; 976 | width: 100%; 977 | height: 100%; 978 | opacity: 1; 979 | border: solid 2px #ffffff; 980 | } 981 | 982 | .hbtn.hb-fill-on-rev-br:hover:before { 983 | width: 100%; 984 | height: 100%; 985 | opacity: 0; 986 | } 987 | 988 | .hbtn.hb-fill-bottom-rev-br:before { 989 | position: absolute; 990 | content: ''; 991 | background: #ffffff; 992 | transition-duration: .3s; 993 | z-index: -1; 994 | top: 0; 995 | right: auto; 996 | bottom: auto; 997 | left: 0; 998 | width: 100%; 999 | height: 100%; 1000 | opacity: 1; 1001 | border: solid 2px #ffffff; 1002 | } 1003 | 1004 | .hbtn.hb-fill-bottom-rev-br:hover:before { 1005 | width: 100%; 1006 | height: 0; 1007 | opacity: 1; 1008 | } 1009 | 1010 | .hbtn.hb-fill-left-rev-br:before { 1011 | position: absolute; 1012 | content: ''; 1013 | background: #ffffff; 1014 | transition-duration: .3s; 1015 | z-index: -1; 1016 | top: 0; 1017 | right: 0; 1018 | bottom: auto; 1019 | left: auto; 1020 | width: 100%; 1021 | height: 100%; 1022 | opacity: 1; 1023 | border: solid 2px #ffffff; 1024 | } 1025 | 1026 | .hbtn.hb-fill-left-rev-br:hover:before { 1027 | width: 0; 1028 | height: 100%; 1029 | opacity: 1; 1030 | } 1031 | 1032 | .hbtn.hb-fill-top-rev-br:before { 1033 | position: absolute; 1034 | content: ''; 1035 | background: #ffffff; 1036 | transition-duration: .3s; 1037 | z-index: -1; 1038 | top: auto; 1039 | right: auto; 1040 | bottom: 0; 1041 | left: 0; 1042 | width: 100%; 1043 | height: 100%; 1044 | opacity: 1; 1045 | border: solid 2px #ffffff; 1046 | } 1047 | 1048 | .hbtn.hb-fill-top-rev-br:hover:before { 1049 | width: 100%; 1050 | height: 0; 1051 | opacity: 1; 1052 | } 1053 | 1054 | .hbtn.hb-fill-right-rev-br:before { 1055 | position: absolute; 1056 | content: ''; 1057 | background: #ffffff; 1058 | transition-duration: .3s; 1059 | z-index: -1; 1060 | top: 0; 1061 | right: auto; 1062 | bottom: auto; 1063 | left: 0; 1064 | width: 100%; 1065 | height: 100%; 1066 | opacity: 1; 1067 | border: solid 2px #ffffff; 1068 | } 1069 | 1070 | .hbtn.hb-fill-right-rev-br:hover:before { 1071 | width: 0; 1072 | height: 100%; 1073 | opacity: 1; 1074 | } 1075 | 1076 | .hbtn.hb-fill-middle-rev-br:before { 1077 | position: absolute; 1078 | content: ''; 1079 | background: #ffffff; 1080 | transition-duration: .3s; 1081 | z-index: -1; 1082 | top: auto; 1083 | right: auto; 1084 | bottom: 0; 1085 | left: 0; 1086 | width: 100%; 1087 | height: 50%; 1088 | opacity: 1; 1089 | border: solid 2px #ffffff; 1090 | } 1091 | 1092 | .hbtn.hb-fill-middle-rev-br:hover:before { 1093 | width: 100%; 1094 | height: 0%; 1095 | opacity: 1; 1096 | } 1097 | 1098 | .hbtn.hb-fill-middle2-rev-br:before { 1099 | position: absolute; 1100 | content: ''; 1101 | background: #ffffff; 1102 | transition-duration: .3s; 1103 | z-index: -1; 1104 | top: 0; 1105 | right: 0; 1106 | bottom: auto; 1107 | left: auto; 1108 | width: 50%; 1109 | height: 100%; 1110 | opacity: 1; 1111 | border: solid 2px #ffffff; 1112 | } 1113 | 1114 | .hbtn.hb-fill-middle2-rev-br:hover:before { 1115 | width: 0; 1116 | height: 100%; 1117 | opacity: 1; 1118 | } 1119 | 1120 | .hb-fill-top-br, .hb-fill-right-br, .hb-fill-bottom-br, .hb-fill-left-br, .hb-fill-on-br, .hb-fill-middle-br, .hb-fill-middle2-br { 1121 | background: transparent; 1122 | color: #ffffff; 1123 | transition: color 0.3s ease, background 0s ease; 1124 | } 1125 | 1126 | .hb-fill-top-br:hover, .hb-fill-right-br:hover, .hb-fill-bottom-br:hover, .hb-fill-left-br:hover, .hb-fill-on-br:hover, .hb-fill-middle-br:hover, .hb-fill-middle2-br:hover { 1127 | color: #000000; 1128 | background: #ffffff; 1129 | transition: color 0.3s ease, background 0s 0.3s ease; 1130 | } 1131 | 1132 | .hb-fill-top-rev-br, .hb-fill-right-rev-br, .hb-fill-bottom-rev-br, .hb-fill-left-rev-br, .hb-fill-on-rev-br, .hb-fill-middle-rev-br, .hb-fill-middle2-rev-br { 1133 | background: #ffffff; 1134 | color: #000000; 1135 | transition: color 0.3s ease, background 0s 0.3s ease; 1136 | } 1137 | 1138 | .hb-fill-top-rev-br:hover, .hb-fill-right-rev-br:hover, .hb-fill-bottom-rev-br:hover, .hb-fill-left-rev-br:hover, .hb-fill-on-rev-br:hover, .hb-fill-middle-rev-br:hover, .hb-fill-middle2-rev-br:hover { 1139 | background: transparent; 1140 | color: #ffffff; 1141 | transition: color 0.3s ease, background 0s ease; 1142 | } 1143 | 1144 | .hb-fill-middle-br:after { 1145 | position: absolute; 1146 | content: ''; 1147 | background: #ffffff; 1148 | transition-duration: .3s; 1149 | z-index: -1; 1150 | top: 0; 1151 | right: auto; 1152 | bottom: auto; 1153 | left: 0; 1154 | width: 100%; 1155 | height: 0; 1156 | opacity: 1; 1157 | border: solid 2px #ffffff; 1158 | } 1159 | 1160 | .hb-fill-middle-br:hover:after { 1161 | height: 50%; 1162 | } 1163 | 1164 | .hb-fill-middle-rev-br:after { 1165 | position: absolute; 1166 | content: ''; 1167 | background: #ffffff; 1168 | transition-duration: .3s; 1169 | z-index: -1; 1170 | top: 0; 1171 | right: auto; 1172 | bottom: auto; 1173 | left: 0; 1174 | width: 100%; 1175 | height: 50%; 1176 | opacity: 1; 1177 | border: solid 2px #ffffff; 1178 | } 1179 | 1180 | .hb-fill-middle-rev-br:hover:after { 1181 | height: 0; 1182 | } 1183 | 1184 | .hb-fill-middle2-br:after { 1185 | position: absolute; 1186 | content: ''; 1187 | background: #ffffff; 1188 | transition-duration: .3s; 1189 | z-index: -1; 1190 | top: 0; 1191 | right: auto; 1192 | bottom: auto; 1193 | left: 0; 1194 | width: 0; 1195 | height: 100%; 1196 | opacity: 1; 1197 | border: solid 2px #ffffff; 1198 | } 1199 | 1200 | .hb-fill-middle2-br:hover:after { 1201 | width: 50%; 1202 | } 1203 | 1204 | .hb-fill-middle2-rev-br:after { 1205 | position: absolute; 1206 | content: ''; 1207 | background: #ffffff; 1208 | transition-duration: .3s; 1209 | z-index: -1; 1210 | top: 0; 1211 | right: auto; 1212 | bottom: auto; 1213 | left: 0; 1214 | width: 50%; 1215 | height: 100%; 1216 | opacity: 1; 1217 | border: solid 2px #ffffff; 1218 | } 1219 | 1220 | .hb-fill-middle2-rev-br:hover:after { 1221 | width: 0; 1222 | } 1223 | 1224 | .hbtn.hb-fill-on-bg-br:before { 1225 | position: absolute; 1226 | content: ''; 1227 | background: #ffffff; 1228 | transition-duration: .3s; 1229 | z-index: -1; 1230 | top: 0; 1231 | right: auto; 1232 | bottom: auto; 1233 | left: 0; 1234 | width: 100%; 1235 | height: 100%; 1236 | opacity: 0; 1237 | border: solid 2px #ffffff; 1238 | } 1239 | 1240 | .hbtn.hb-fill-on-bg-br:hover:before { 1241 | width: 100%; 1242 | height: 100%; 1243 | opacity: 1; 1244 | } 1245 | 1246 | .hbtn.hb-fill-bottom-bg-br:before { 1247 | position: absolute; 1248 | content: ''; 1249 | background: #ffffff; 1250 | transition-duration: .3s; 1251 | z-index: -1; 1252 | top: 0; 1253 | right: auto; 1254 | bottom: auto; 1255 | left: 0; 1256 | width: 100%; 1257 | height: 0; 1258 | opacity: 1; 1259 | border: solid 2px #ffffff; 1260 | } 1261 | 1262 | .hbtn.hb-fill-bottom-bg-br:hover:before { 1263 | width: 100%; 1264 | height: 100%; 1265 | opacity: 1; 1266 | } 1267 | 1268 | .hbtn.hb-fill-left-bg-br:before { 1269 | position: absolute; 1270 | content: ''; 1271 | background: #ffffff; 1272 | transition-duration: .3s; 1273 | z-index: -1; 1274 | top: 0; 1275 | right: 0; 1276 | bottom: auto; 1277 | left: auto; 1278 | width: 0; 1279 | height: 100%; 1280 | opacity: 1; 1281 | border: solid 2px #ffffff; 1282 | } 1283 | 1284 | .hbtn.hb-fill-left-bg-br:hover:before { 1285 | width: 100%; 1286 | height: 100%; 1287 | opacity: 1; 1288 | } 1289 | 1290 | .hbtn.hb-fill-top-bg-br:before { 1291 | position: absolute; 1292 | content: ''; 1293 | background: #ffffff; 1294 | transition-duration: .3s; 1295 | z-index: -1; 1296 | top: auto; 1297 | right: auto; 1298 | bottom: 0; 1299 | left: 0; 1300 | width: 100%; 1301 | height: 0; 1302 | opacity: 1; 1303 | border: solid 2px #ffffff; 1304 | } 1305 | 1306 | .hbtn.hb-fill-top-bg-br:hover:before { 1307 | width: 100%; 1308 | height: 100%; 1309 | opacity: 1; 1310 | } 1311 | 1312 | .hbtn.hb-fill-right-bg-br:before { 1313 | position: absolute; 1314 | content: ''; 1315 | background: #ffffff; 1316 | transition-duration: .3s; 1317 | z-index: -1; 1318 | top: 0; 1319 | right: auto; 1320 | bottom: auto; 1321 | left: 0; 1322 | width: 0; 1323 | height: 100%; 1324 | opacity: 1; 1325 | border: solid 2px #ffffff; 1326 | } 1327 | 1328 | .hbtn.hb-fill-right-bg-br:hover:before { 1329 | width: 100%; 1330 | height: 100%; 1331 | opacity: 1; 1332 | } 1333 | 1334 | .hbtn.hb-fill-middle-bg-br:before { 1335 | position: absolute; 1336 | content: ''; 1337 | background: #ffffff; 1338 | transition-duration: .3s; 1339 | z-index: -1; 1340 | top: auto; 1341 | right: auto; 1342 | bottom: 0; 1343 | left: 0; 1344 | width: 100%; 1345 | height: 0; 1346 | opacity: 1; 1347 | border: solid 2px #ffffff; 1348 | } 1349 | 1350 | .hbtn.hb-fill-middle-bg-br:hover:before { 1351 | width: 100%; 1352 | height: 50%; 1353 | opacity: 1; 1354 | } 1355 | 1356 | .hbtn.hb-fill-middle2-bg-br:before { 1357 | position: absolute; 1358 | content: ''; 1359 | background: #ffffff; 1360 | transition-duration: .3s; 1361 | z-index: -1; 1362 | top: 0; 1363 | right: 0; 1364 | bottom: auto; 1365 | left: auto; 1366 | width: 0; 1367 | height: 100%; 1368 | opacity: 1; 1369 | border: solid 2px #ffffff; 1370 | } 1371 | 1372 | .hbtn.hb-fill-middle2-bg-br:hover:before { 1373 | width: 50%; 1374 | height: 100%; 1375 | opacity: 1; 1376 | } 1377 | 1378 | .hbtn.hb-fill-on-rev-bg-br:before { 1379 | position: absolute; 1380 | content: ''; 1381 | background: #ffffff; 1382 | transition-duration: .3s; 1383 | z-index: -1; 1384 | top: 0; 1385 | right: auto; 1386 | bottom: auto; 1387 | left: 0; 1388 | width: 100%; 1389 | height: 100%; 1390 | opacity: 1; 1391 | border: solid 2px #ffffff; 1392 | } 1393 | 1394 | .hbtn.hb-fill-on-rev-bg-br:hover:before { 1395 | width: 100%; 1396 | height: 100%; 1397 | opacity: 0; 1398 | } 1399 | 1400 | .hbtn.hb-fill-bottom-rev-bg-br:before { 1401 | position: absolute; 1402 | content: ''; 1403 | background: #ffffff; 1404 | transition-duration: .3s; 1405 | z-index: -1; 1406 | top: 0; 1407 | right: auto; 1408 | bottom: auto; 1409 | left: 0; 1410 | width: 100%; 1411 | height: 100%; 1412 | opacity: 1; 1413 | border: solid 2px #ffffff; 1414 | } 1415 | 1416 | .hbtn.hb-fill-bottom-rev-bg-br:hover:before { 1417 | width: 100%; 1418 | height: 0; 1419 | opacity: 1; 1420 | } 1421 | 1422 | .hbtn.hb-fill-left-rev-bg-br:before { 1423 | position: absolute; 1424 | content: ''; 1425 | background: #ffffff; 1426 | transition-duration: .3s; 1427 | z-index: -1; 1428 | top: 0; 1429 | right: 0; 1430 | bottom: auto; 1431 | left: auto; 1432 | width: 100%; 1433 | height: 100%; 1434 | opacity: 1; 1435 | border: solid 2px #ffffff; 1436 | } 1437 | 1438 | .hbtn.hb-fill-left-rev-bg-br:hover:before { 1439 | width: 0; 1440 | height: 100%; 1441 | opacity: 1; 1442 | } 1443 | 1444 | .hbtn.hb-fill-top-rev-bg-br:before { 1445 | position: absolute; 1446 | content: ''; 1447 | background: #ffffff; 1448 | transition-duration: .3s; 1449 | z-index: -1; 1450 | top: auto; 1451 | right: auto; 1452 | bottom: 0; 1453 | left: 0; 1454 | width: 100%; 1455 | height: 100%; 1456 | opacity: 1; 1457 | border: solid 2px #ffffff; 1458 | } 1459 | 1460 | .hbtn.hb-fill-top-rev-bg-br:hover:before { 1461 | width: 100%; 1462 | height: 0; 1463 | opacity: 1; 1464 | } 1465 | 1466 | .hbtn.hb-fill-right-rev-bg-br:before { 1467 | position: absolute; 1468 | content: ''; 1469 | background: #ffffff; 1470 | transition-duration: .3s; 1471 | z-index: -1; 1472 | top: 0; 1473 | right: auto; 1474 | bottom: auto; 1475 | left: 0; 1476 | width: 100%; 1477 | height: 100%; 1478 | opacity: 1; 1479 | border: solid 2px #ffffff; 1480 | } 1481 | 1482 | .hbtn.hb-fill-right-rev-bg-br:hover:before { 1483 | width: 0; 1484 | height: 100%; 1485 | opacity: 1; 1486 | } 1487 | 1488 | .hbtn.hb-fill-middle-rev-bg-br:before { 1489 | position: absolute; 1490 | content: ''; 1491 | background: #ffffff; 1492 | transition-duration: .3s; 1493 | z-index: -1; 1494 | top: auto; 1495 | right: auto; 1496 | bottom: 0; 1497 | left: 0; 1498 | width: 100%; 1499 | height: 50%; 1500 | opacity: 1; 1501 | border: solid 2px #ffffff; 1502 | } 1503 | 1504 | .hbtn.hb-fill-middle-rev-bg-br:hover:before { 1505 | width: 100%; 1506 | height: 0%; 1507 | opacity: 1; 1508 | } 1509 | 1510 | .hbtn.hb-fill-middle2-rev-bg-br:before { 1511 | position: absolute; 1512 | content: ''; 1513 | background: #ffffff; 1514 | transition-duration: .3s; 1515 | z-index: -1; 1516 | top: 0; 1517 | right: 0; 1518 | bottom: auto; 1519 | left: auto; 1520 | width: 50%; 1521 | height: 100%; 1522 | opacity: 1; 1523 | border: solid 2px #ffffff; 1524 | } 1525 | 1526 | .hbtn.hb-fill-middle2-rev-bg-br:hover:before { 1527 | width: 0; 1528 | height: 100%; 1529 | opacity: 1; 1530 | } 1531 | 1532 | .hb-fill-top-bg-br, .hb-fill-right-bg-br, .hb-fill-bottom-bg-br, .hb-fill-left-bg-br, .hb-fill-on-bg-br, .hb-fill-middle-bg-br, .hb-fill-middle2-bg-br { 1533 | background: transparent; 1534 | color: #ffffff; 1535 | transition: all 0.3s ease; 1536 | } 1537 | 1538 | .hb-fill-top-bg-br:hover, .hb-fill-right-bg-br:hover, .hb-fill-bottom-bg-br:hover, .hb-fill-left-bg-br:hover, .hb-fill-on-bg-br:hover, .hb-fill-middle-bg-br:hover, .hb-fill-middle2-bg-br:hover { 1539 | color: #000000; 1540 | background: #ffffff; 1541 | transition: all 0.3s ease; 1542 | } 1543 | 1544 | .hb-fill-top-rev-bg-br, .hb-fill-right-rev-bg-br, .hb-fill-bottom-rev-bg-br, .hb-fill-left-rev-bg-br, .hb-fill-on-rev-bg-br, .hb-fill-middle-rev-bg-br, .hb-fill-middle2-rev-bg-br { 1545 | background: #ffffff; 1546 | color: #000000; 1547 | transition: all 0.3s ease; 1548 | } 1549 | 1550 | .hb-fill-top-rev-bg-br:hover, .hb-fill-right-rev-bg-br:hover, .hb-fill-bottom-rev-bg-br:hover, .hb-fill-left-rev-bg-br:hover, .hb-fill-on-rev-bg-br:hover, .hb-fill-middle-rev-bg-br:hover, .hb-fill-middle2-rev-bg-br:hover { 1551 | background: transparent; 1552 | color: #ffffff; 1553 | transition: all 0.3s ease; 1554 | } 1555 | 1556 | .hb-fill-middle-bg-br:after { 1557 | position: absolute; 1558 | content: ''; 1559 | background: #ffffff; 1560 | transition-duration: .3s; 1561 | z-index: -1; 1562 | top: 0; 1563 | right: auto; 1564 | bottom: auto; 1565 | left: 0; 1566 | width: 100%; 1567 | height: 0; 1568 | opacity: 1; 1569 | border: solid 2px #ffffff; 1570 | } 1571 | 1572 | .hb-fill-middle-bg-br:hover:after { 1573 | height: 50%; 1574 | } 1575 | 1576 | .hb-fill-middle-rev-bg-br:after { 1577 | position: absolute; 1578 | content: ''; 1579 | background: #ffffff; 1580 | transition-duration: .3s; 1581 | z-index: -1; 1582 | top: 0; 1583 | right: auto; 1584 | bottom: auto; 1585 | left: 0; 1586 | width: 100%; 1587 | height: 50%; 1588 | opacity: 1; 1589 | border: solid 2px #ffffff; 1590 | } 1591 | 1592 | .hb-fill-middle-rev-bg-br:hover:after { 1593 | height: 0; 1594 | } 1595 | 1596 | .hb-fill-middle2-bg-br:after { 1597 | position: absolute; 1598 | content: ''; 1599 | background: #ffffff; 1600 | transition-duration: .3s; 1601 | z-index: -1; 1602 | top: 0; 1603 | right: auto; 1604 | bottom: auto; 1605 | left: 0; 1606 | width: 0; 1607 | height: 100%; 1608 | opacity: 1; 1609 | border: solid 2px #ffffff; 1610 | } 1611 | 1612 | .hb-fill-middle2-bg-br:hover:after { 1613 | width: 50%; 1614 | } 1615 | 1616 | .hb-fill-middle2-rev-bg-br:after { 1617 | position: absolute; 1618 | content: ''; 1619 | background: #ffffff; 1620 | transition-duration: .3s; 1621 | z-index: -1; 1622 | top: 0; 1623 | right: auto; 1624 | bottom: auto; 1625 | left: 0; 1626 | width: 50%; 1627 | height: 100%; 1628 | opacity: 1; 1629 | border: solid 2px #ffffff; 1630 | } 1631 | 1632 | .hb-fill-middle2-rev-bg-br:hover:after { 1633 | width: 0; 1634 | } 1635 | 1636 | .hpill.hb-border-off:after { 1637 | border-radius: 50px; 1638 | } 1639 | 1640 | .hpill.hb-border-off2:after { 1641 | border-radius: 50px; 1642 | } 1643 | 1644 | .hpill.hb-border-off3:after { 1645 | border-radius: 50px; 1646 | } 1647 | 1648 | .hpill.hb-border-top:after { 1649 | border-radius: 50px; 1650 | } 1651 | 1652 | .hpill.hb-border-right:after { 1653 | border-radius: 50px; 1654 | } 1655 | 1656 | .hpill.hb-border-bottom:after { 1657 | border-radius: 50px; 1658 | } 1659 | 1660 | .hpill.hb-border-left:after { 1661 | border-radius: 50px; 1662 | } 1663 | 1664 | .hbtn.hb-border-off { 1665 | border-color: #ffffff; 1666 | transition-duration: .3s; 1667 | } 1668 | 1669 | .hbtn.hb-border-off:hover { 1670 | border-color: transparent; 1671 | } 1672 | 1673 | .hbtn.hb-border-off2 { 1674 | border-color: #ffffff; 1675 | transition-duration: .3s; 1676 | } 1677 | 1678 | .hbtn.hb-border-off2:hover { 1679 | border-color: initial; 1680 | } 1681 | 1682 | .hbtn.hb-border-off3 { 1683 | border-color: #ffffff; 1684 | transition-duration: .3s; 1685 | } 1686 | 1687 | .hbtn.hb-border-off3:hover { 1688 | border-color: initial; 1689 | } 1690 | 1691 | .hbtn.hb-border-top { 1692 | border-color: #ffffff; 1693 | transition-duration: .3s; 1694 | } 1695 | 1696 | .hbtn.hb-border-top:hover { 1697 | border-color: initial; 1698 | } 1699 | 1700 | .hbtn.hb-border-right { 1701 | border-color: #ffffff; 1702 | transition-duration: .3s; 1703 | } 1704 | 1705 | .hbtn.hb-border-right:hover { 1706 | border-color: initial; 1707 | } 1708 | 1709 | .hbtn.hb-border-bottom { 1710 | border-color: #ffffff; 1711 | transition-duration: .3s; 1712 | } 1713 | 1714 | .hbtn.hb-border-bottom:hover { 1715 | border-color: initial; 1716 | } 1717 | 1718 | .hbtn.hb-border-left { 1719 | border-color: #ffffff; 1720 | transition-duration: .3s; 1721 | } 1722 | 1723 | .hbtn.hb-border-left:hover { 1724 | border-color: initial; 1725 | } 1726 | 1727 | .hbtn.hb-border-off2 { 1728 | transition: border-top-color 0.1s 0.21s linear, border-right-color 0.1s 0.14s linear, border-bottom-color 0.1s 0.07s linear, border-left-color 0.1s 0s linear; 1729 | } 1730 | 1731 | .hbtn.hb-border-off2:hover { 1732 | border-top-color: transparent; 1733 | border-right-color: transparent; 1734 | border-bottom-color: transparent; 1735 | border-left-color: transparent; 1736 | transition: border-top-color 0.1s 0s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0.14s linear, border-left-color 0.1s 0.21s linear; 1737 | } 1738 | 1739 | .hbtn.hb-border-off3 { 1740 | transition: border-top-color 0.1s 0s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0.14s linear, border-left-color 0.1s 0.21s linear; 1741 | } 1742 | 1743 | .hbtn.hb-border-off3:hover { 1744 | border-top-color: transparent; 1745 | border-right-color: transparent; 1746 | border-bottom-color: transparent; 1747 | border-left-color: transparent; 1748 | transition: border-top-color 0.1s 0s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0.14s linear, border-left-color 0.1s 0.21s linear; 1749 | } 1750 | 1751 | .hbtn.hb-border-top { 1752 | transition: border-right-color 0.1s 0.14s linear, border-bottom-color 0.1s 0.07s linear, border-left-color 0.1s 0s linear; 1753 | } 1754 | 1755 | .hbtn.hb-border-top:hover { 1756 | border-right-color: transparent; 1757 | border-bottom-color: transparent; 1758 | border-left-color: transparent; 1759 | transition: border-right-color 0.1s 0s linear, border-bottom-color 0.1s 0.07s linear, border-left-color 0.1s 0.14s linear; 1760 | } 1761 | 1762 | .hbtn.hb-border-right { 1763 | transition: border-bottom-color 0.1s 0.14s linear, border-left-color 0.1s 0.07s linear, border-top-color 0.1s 0s linear; 1764 | } 1765 | 1766 | .hbtn.hb-border-right:hover { 1767 | border-bottom-color: transparent; 1768 | border-left-color: transparent; 1769 | border-top-color: transparent; 1770 | transition: border-bottom-color 0.1s 0s linear, border-left-color 0.1s 0.07s linear, border-top-color 0.1s 0.14s linear; 1771 | } 1772 | 1773 | .hbtn.hb-border-bottom { 1774 | transition: border-left-color 0.1s 0.14s linear, border-top-color 0.1s 0.07s linear, border-right-color 0.1s 0s linear; 1775 | } 1776 | 1777 | .hbtn.hb-border-bottom:hover { 1778 | border-left-color: transparent; 1779 | border-top-color: transparent; 1780 | border-right-color: transparent; 1781 | transition: border-left-color 0.1s 0s linear, border-top-color 0.1s 0.07s linear, border-right-color 0.1s 0.14s linear; 1782 | } 1783 | 1784 | .hbtn.hb-border-left { 1785 | transition: border-top-color 0.1s 0.14s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0s linear; 1786 | } 1787 | 1788 | .hbtn.hb-border-left:hover { 1789 | border-top-color: transparent; 1790 | border-right-color: transparent; 1791 | border-bottom-color: transparent; 1792 | transition: border-top-color 0.1s 0s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0.14s linear; 1793 | } 1794 | 1795 | .hpill.hb-border-off:after { 1796 | border-radius: 50px; 1797 | } 1798 | 1799 | .hpill.hb-border-off2:after { 1800 | border-radius: 50px; 1801 | } 1802 | 1803 | .hpill.hb-border-off3:after { 1804 | border-radius: 50px; 1805 | } 1806 | 1807 | .hpill.hb-border-top:after { 1808 | border-radius: 50px; 1809 | } 1810 | 1811 | .hpill.hb-border-right:after { 1812 | border-radius: 50px; 1813 | } 1814 | 1815 | .hpill.hb-border-bottom:after { 1816 | border-radius: 50px; 1817 | } 1818 | 1819 | .hpill.hb-border-left:after { 1820 | border-radius: 50px; 1821 | } 1822 | 1823 | .hbtn.hb-border-off2 { 1824 | border-color: #ffffff; 1825 | transition-duration: .3s; 1826 | } 1827 | 1828 | .hbtn.hb-border-off2:hover { 1829 | border-color: transparent; 1830 | } 1831 | 1832 | .hbtn.hb-border-off22 { 1833 | border-color: #ffffff; 1834 | transition-duration: .3s; 1835 | } 1836 | 1837 | .hbtn.hb-border-off22:hover { 1838 | border-color: initial; 1839 | } 1840 | 1841 | .hbtn.hb-border-off32 { 1842 | border-color: #ffffff; 1843 | transition-duration: .3s; 1844 | } 1845 | 1846 | .hbtn.hb-border-off32:hover { 1847 | border-color: initial; 1848 | } 1849 | 1850 | .hbtn.hb-border-top2 { 1851 | border-color: #ffffff; 1852 | transition-duration: .3s; 1853 | } 1854 | 1855 | .hbtn.hb-border-top2:hover { 1856 | border-color: initial; 1857 | } 1858 | 1859 | .hbtn.hb-border-right2 { 1860 | border-color: #ffffff; 1861 | transition-duration: .3s; 1862 | } 1863 | 1864 | .hbtn.hb-border-right2:hover { 1865 | border-color: initial; 1866 | } 1867 | 1868 | .hbtn.hb-border-bottom2 { 1869 | border-color: #ffffff; 1870 | transition-duration: .3s; 1871 | } 1872 | 1873 | .hbtn.hb-border-bottom2:hover { 1874 | border-color: initial; 1875 | } 1876 | 1877 | .hbtn.hb-border-left2 { 1878 | border-color: #ffffff; 1879 | transition-duration: .3s; 1880 | } 1881 | 1882 | .hbtn.hb-border-left2:hover { 1883 | border-color: initial; 1884 | } 1885 | 1886 | .hbtn.hb-border-top2 { 1887 | transition: all 0.2s 0s linear; 1888 | } 1889 | 1890 | .hbtn.hb-border-top2:hover { 1891 | border-right-color: transparent; 1892 | border-bottom-color: transparent; 1893 | border-left-color: transparent; 1894 | transition: all 0.2s 0s linear; 1895 | } 1896 | 1897 | .hbtn.hb-border-right2 { 1898 | transition: all 0.2s 0s linear; 1899 | } 1900 | 1901 | .hbtn.hb-border-right2:hover { 1902 | border-bottom-color: transparent; 1903 | border-left-color: transparent; 1904 | border-top-color: transparent; 1905 | transition: all 0.2s 0s linear; 1906 | } 1907 | 1908 | .hbtn.hb-border-bottom2 { 1909 | transition: all 0.2s 0s linear; 1910 | } 1911 | 1912 | .hbtn.hb-border-bottom2:hover { 1913 | border-left-color: transparent; 1914 | border-top-color: transparent; 1915 | border-right-color: transparent; 1916 | transition: all 0.2s 0s linear; 1917 | } 1918 | 1919 | .hbtn.hb-border-left2 { 1920 | transition: all 0.2s 0s linear; 1921 | } 1922 | 1923 | .hbtn.hb-border-left2:hover { 1924 | border-top-color: transparent; 1925 | border-right-color: transparent; 1926 | border-bottom-color: transparent; 1927 | transition: all 0.2s 0s linear; 1928 | } 1929 | 1930 | .hpill.hb-border-off-br:after { 1931 | border-radius: 50px; 1932 | } 1933 | 1934 | .hpill.hb-border-off2-br:after { 1935 | border-radius: 50px; 1936 | } 1937 | 1938 | .hpill.hb-border-off3-br:after { 1939 | border-radius: 50px; 1940 | } 1941 | 1942 | .hpill.hb-border-top-br:after { 1943 | border-radius: 50px; 1944 | } 1945 | 1946 | .hpill.hb-border-right-br:after { 1947 | border-radius: 50px; 1948 | } 1949 | 1950 | .hpill.hb-border-bottom-br:after { 1951 | border-radius: 50px; 1952 | } 1953 | 1954 | .hpill.hb-border-left-br:after { 1955 | border-radius: 50px; 1956 | } 1957 | 1958 | .hbtn.hb-border-off-br { 1959 | position: relative; 1960 | transition-duration: .3s; 1961 | overflow: visible; 1962 | box-sizing: border-box; 1963 | border: none; 1964 | padding: 10px 22px; 1965 | } 1966 | 1967 | .hbtn.hb-border-off-br:after { 1968 | box-sizing: border-box; 1969 | position: absolute; 1970 | top: 0; 1971 | left: 0; 1972 | width: 100%; 1973 | height: 100%; 1974 | content: ''; 1975 | border: solid 2px #ffffff; 1976 | z-index: 2; 1977 | } 1978 | 1979 | .hbtn.hb-border-off2-br { 1980 | position: relative; 1981 | transition-duration: .3s; 1982 | overflow: visible; 1983 | box-sizing: border-box; 1984 | border: none; 1985 | padding: 10px 22px; 1986 | } 1987 | 1988 | .hbtn.hb-border-off2-br:after { 1989 | box-sizing: border-box; 1990 | position: absolute; 1991 | top: 0; 1992 | left: 0; 1993 | width: 100%; 1994 | height: 100%; 1995 | content: ''; 1996 | border: solid 2px #ffffff; 1997 | z-index: 2; 1998 | } 1999 | 2000 | .hbtn.hb-border-off3-br { 2001 | position: relative; 2002 | transition-duration: .3s; 2003 | overflow: visible; 2004 | box-sizing: border-box; 2005 | border: none; 2006 | padding: 10px 22px; 2007 | } 2008 | 2009 | .hbtn.hb-border-off3-br:after { 2010 | box-sizing: border-box; 2011 | position: absolute; 2012 | top: 0; 2013 | left: 0; 2014 | width: 100%; 2015 | height: 100%; 2016 | content: ''; 2017 | border: solid 2px #ffffff; 2018 | z-index: 2; 2019 | } 2020 | 2021 | .hbtn.hb-border-top-br { 2022 | position: relative; 2023 | transition-duration: .3s; 2024 | overflow: visible; 2025 | box-sizing: border-box; 2026 | border: none; 2027 | padding: 10px 22px; 2028 | } 2029 | 2030 | .hbtn.hb-border-top-br:after { 2031 | box-sizing: border-box; 2032 | position: absolute; 2033 | top: 0; 2034 | left: 0; 2035 | width: 100%; 2036 | height: 100%; 2037 | content: ''; 2038 | border: solid 2px #ffffff; 2039 | z-index: 2; 2040 | } 2041 | 2042 | .hbtn.hb-border-right-br { 2043 | position: relative; 2044 | transition-duration: .3s; 2045 | overflow: visible; 2046 | box-sizing: border-box; 2047 | border: none; 2048 | padding: 10px 22px; 2049 | } 2050 | 2051 | .hbtn.hb-border-right-br:after { 2052 | box-sizing: border-box; 2053 | position: absolute; 2054 | top: 0; 2055 | left: 0; 2056 | width: 100%; 2057 | height: 100%; 2058 | content: ''; 2059 | border: solid 2px #ffffff; 2060 | z-index: 2; 2061 | } 2062 | 2063 | .hbtn.hb-border-bottom-br { 2064 | position: relative; 2065 | transition-duration: .3s; 2066 | overflow: visible; 2067 | box-sizing: border-box; 2068 | border: none; 2069 | padding: 10px 22px; 2070 | } 2071 | 2072 | .hbtn.hb-border-bottom-br:after { 2073 | box-sizing: border-box; 2074 | position: absolute; 2075 | top: 0; 2076 | left: 0; 2077 | width: 100%; 2078 | height: 100%; 2079 | content: ''; 2080 | border: solid 2px #ffffff; 2081 | z-index: 2; 2082 | } 2083 | 2084 | .hbtn.hb-border-left-br { 2085 | position: relative; 2086 | transition-duration: .3s; 2087 | overflow: visible; 2088 | box-sizing: border-box; 2089 | border: none; 2090 | padding: 10px 22px; 2091 | } 2092 | 2093 | .hbtn.hb-border-left-br:after { 2094 | box-sizing: border-box; 2095 | position: absolute; 2096 | top: 0; 2097 | left: 0; 2098 | width: 100%; 2099 | height: 100%; 2100 | content: ''; 2101 | border: solid 2px #ffffff; 2102 | z-index: 2; 2103 | } 2104 | 2105 | .hbtn.hb-border-top-br:after { 2106 | transition: border-right-color 0.1s 0.14s linear, border-bottom-color 0.1s 0.07s linear, border-left-color 0.1s 0s linear, border-top-width 0.1s 0s linear; 2107 | } 2108 | 2109 | .hbtn.hb-border-top-br:hover:after { 2110 | border-right-color: transparent; 2111 | border-bottom-color: transparent; 2112 | border-left-color: transparent; 2113 | border-top-width: 4px; 2114 | transition: border-right-color 0.1s 0s linear, border-bottom-color 0.1s 0.07s linear, border-left-color 0.1s 0.14s linear, border-top-width 0.1s 0.14s linear; 2115 | } 2116 | 2117 | .hbtn.hb-border-right-br:after { 2118 | transition: border-bottom-color 0.1s 0.14s linear, border-left-color 0.1s 0.07s linear, border-top-color 0.1s 0s linear, border-right-width 0.1s 0s linear; 2119 | } 2120 | 2121 | .hbtn.hb-border-right-br:hover:after { 2122 | border-bottom-color: transparent; 2123 | border-left-color: transparent; 2124 | border-top-color: transparent; 2125 | border-right-width: 4px; 2126 | transition: border-bottom-color 0.1s 0s linear, border-left-color 0.1s 0.07s linear, border-top-color 0.1s 0.14s linear, border-right-width 0.1s 0.14s linear; 2127 | } 2128 | 2129 | .hbtn.hb-border-bottom-br:after { 2130 | transition: border-left-color 0.1s 0.14s linear, border-top-color 0.1s 0.07s linear, border-right-color 0.1s 0s linear, border-bottom-width 0.1s 0.14s linear; 2131 | } 2132 | 2133 | .hbtn.hb-border-bottom-br:hover:after { 2134 | border-left-color: transparent; 2135 | border-top-color: transparent; 2136 | border-right-color: transparent; 2137 | border-bottom-width: 4px; 2138 | transition: border-left-color 0.1s 0s linear, border-top-color 0.1s 0.07s linear, border-right-color 0.1s 0.14s linear, border-bottom-width 0.1s 0.14s linear; 2139 | } 2140 | 2141 | .hbtn.hb-border-left-br:after { 2142 | transition: border-top-color 0.1s 0.14s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0s linear, border-left-width 0.1s 0s linear; 2143 | } 2144 | 2145 | .hbtn.hb-border-left-br:hover:after { 2146 | border-top-color: transparent; 2147 | border-right-color: transparent; 2148 | border-bottom-color: transparent; 2149 | border-left-width: 4px; 2150 | transition: border-top-color 0.1s 0s linear, border-right-color 0.1s 0.07s linear, border-bottom-color 0.1s 0.14s linear, border-left-width 0.1s 0.14s linear; 2151 | } 2152 | 2153 | .hpill.hb-border-off-br2:after { 2154 | border-radius: 50px; 2155 | } 2156 | 2157 | .hpill.hb-border-off2-br2:after { 2158 | border-radius: 50px; 2159 | } 2160 | 2161 | .hpill.hb-border-off3-br2:after { 2162 | border-radius: 50px; 2163 | } 2164 | 2165 | .hpill.hb-border-top-br2:after { 2166 | border-radius: 50px; 2167 | } 2168 | 2169 | .hpill.hb-border-right-br2:after { 2170 | border-radius: 50px; 2171 | } 2172 | 2173 | .hpill.hb-border-bottom-br2:after { 2174 | border-radius: 50px; 2175 | } 2176 | 2177 | .hpill.hb-border-left-br2:after { 2178 | border-radius: 50px; 2179 | } 2180 | 2181 | .hbtn.hb-border-off-br2 { 2182 | position: relative; 2183 | transition-duration: .2s; 2184 | overflow: visible; 2185 | box-sizing: border-box; 2186 | border: none; 2187 | padding: 10px 22px; 2188 | } 2189 | 2190 | .hbtn.hb-border-off-br2:after { 2191 | box-sizing: border-box; 2192 | position: absolute; 2193 | top: 0; 2194 | left: 0; 2195 | width: 100%; 2196 | height: 100%; 2197 | content: ''; 2198 | border: solid 2px #ffffff; 2199 | z-index: 2; 2200 | } 2201 | 2202 | .hbtn.hb-border-off2-br2 { 2203 | position: relative; 2204 | transition-duration: .2s; 2205 | overflow: visible; 2206 | box-sizing: border-box; 2207 | border: none; 2208 | padding: 10px 22px; 2209 | } 2210 | 2211 | .hbtn.hb-border-off2-br2:after { 2212 | box-sizing: border-box; 2213 | position: absolute; 2214 | top: 0; 2215 | left: 0; 2216 | width: 100%; 2217 | height: 100%; 2218 | content: ''; 2219 | border: solid 2px #ffffff; 2220 | z-index: 2; 2221 | } 2222 | 2223 | .hbtn.hb-border-off3-br2 { 2224 | position: relative; 2225 | transition-duration: .2s; 2226 | overflow: visible; 2227 | box-sizing: border-box; 2228 | border: none; 2229 | padding: 10px 22px; 2230 | } 2231 | 2232 | .hbtn.hb-border-off3-br2:after { 2233 | box-sizing: border-box; 2234 | position: absolute; 2235 | top: 0; 2236 | left: 0; 2237 | width: 100%; 2238 | height: 100%; 2239 | content: ''; 2240 | border: solid 2px #ffffff; 2241 | z-index: 2; 2242 | } 2243 | 2244 | .hbtn.hb-border-top-br2 { 2245 | position: relative; 2246 | transition-duration: .2s; 2247 | overflow: visible; 2248 | box-sizing: border-box; 2249 | border: none; 2250 | padding: 10px 22px; 2251 | } 2252 | 2253 | .hbtn.hb-border-top-br2:after { 2254 | box-sizing: border-box; 2255 | position: absolute; 2256 | top: 0; 2257 | left: 0; 2258 | width: 100%; 2259 | height: 100%; 2260 | content: ''; 2261 | border: solid 2px #ffffff; 2262 | z-index: 2; 2263 | } 2264 | 2265 | .hbtn.hb-border-right-br2 { 2266 | position: relative; 2267 | transition-duration: .2s; 2268 | overflow: visible; 2269 | box-sizing: border-box; 2270 | border: none; 2271 | padding: 10px 22px; 2272 | } 2273 | 2274 | .hbtn.hb-border-right-br2:after { 2275 | box-sizing: border-box; 2276 | position: absolute; 2277 | top: 0; 2278 | left: 0; 2279 | width: 100%; 2280 | height: 100%; 2281 | content: ''; 2282 | border: solid 2px #ffffff; 2283 | z-index: 2; 2284 | } 2285 | 2286 | .hbtn.hb-border-bottom-br2 { 2287 | position: relative; 2288 | transition-duration: .2s; 2289 | overflow: visible; 2290 | box-sizing: border-box; 2291 | border: none; 2292 | padding: 10px 22px; 2293 | } 2294 | 2295 | .hbtn.hb-border-bottom-br2:after { 2296 | box-sizing: border-box; 2297 | position: absolute; 2298 | top: 0; 2299 | left: 0; 2300 | width: 100%; 2301 | height: 100%; 2302 | content: ''; 2303 | border: solid 2px #ffffff; 2304 | z-index: 2; 2305 | } 2306 | 2307 | .hbtn.hb-border-left-br2 { 2308 | position: relative; 2309 | transition-duration: .2s; 2310 | overflow: visible; 2311 | box-sizing: border-box; 2312 | border: none; 2313 | padding: 10px 22px; 2314 | } 2315 | 2316 | .hbtn.hb-border-left-br2:after { 2317 | box-sizing: border-box; 2318 | position: absolute; 2319 | top: 0; 2320 | left: 0; 2321 | width: 100%; 2322 | height: 100%; 2323 | content: ''; 2324 | border: solid 2px #ffffff; 2325 | z-index: 2; 2326 | } 2327 | 2328 | .hbtn.hb-border-top-br2:after { 2329 | transition: all 0.2s linear; 2330 | } 2331 | 2332 | .hbtn.hb-border-top-br2:hover:after { 2333 | border-right-color: transparent; 2334 | border-bottom-color: transparent; 2335 | border-left-color: transparent; 2336 | border-top-width: 4px; 2337 | transition: all 0.2s linear; 2338 | } 2339 | 2340 | .hbtn.hb-border-right-br2:after { 2341 | transition: all 0.2s linear; 2342 | } 2343 | 2344 | .hbtn.hb-border-right-br2:hover:after { 2345 | border-bottom-color: transparent; 2346 | border-left-color: transparent; 2347 | border-top-color: transparent; 2348 | border-right-width: 4px; 2349 | transition: all 0.2s linear; 2350 | } 2351 | 2352 | .hbtn.hb-border-bottom-br2:after { 2353 | transition: all 0.2s linear; 2354 | } 2355 | 2356 | .hbtn.hb-border-bottom-br2:hover:after { 2357 | border-left-color: transparent; 2358 | border-top-color: transparent; 2359 | border-right-color: transparent; 2360 | border-bottom-width: 4px; 2361 | transition: all 0.2s linear; 2362 | } 2363 | 2364 | .hbtn.hb-border-left-br2:after { 2365 | transition: all 0.2s linear; 2366 | } 2367 | 2368 | .hbtn.hb-border-left-br2:hover:after { 2369 | border-top-color: transparent; 2370 | border-right-color: transparent; 2371 | border-bottom-color: transparent; 2372 | border-left-width: 4px; 2373 | transition: all 0.2s linear; 2374 | } 2375 | 2376 | .hpill.hb-border-off-br3:after { 2377 | border-radius: 50px; 2378 | } 2379 | 2380 | .hpill.hb-border-off2-br3:after { 2381 | border-radius: 50px; 2382 | } 2383 | 2384 | .hpill.hb-border-off3-br3:after { 2385 | border-radius: 50px; 2386 | } 2387 | 2388 | .hpill.hb-border-top-br3:after { 2389 | border-radius: 50px; 2390 | } 2391 | 2392 | .hpill.hb-border-right-br3:after { 2393 | border-radius: 50px; 2394 | } 2395 | 2396 | .hpill.hb-border-bottom-br3:after { 2397 | border-radius: 50px; 2398 | } 2399 | 2400 | .hpill.hb-border-left-br3:after { 2401 | border-radius: 50px; 2402 | } 2403 | 2404 | .hbtn.hb-border-off-br3 { 2405 | position: relative; 2406 | transition-duration: .3s; 2407 | overflow: visible; 2408 | box-sizing: border-box; 2409 | border: none; 2410 | padding: 10px 22px; 2411 | } 2412 | 2413 | .hbtn.hb-border-off-br3:after { 2414 | box-sizing: border-box; 2415 | position: absolute; 2416 | width: 100%; 2417 | height: 100%; 2418 | content: ''; 2419 | border: solid 2px #ffffff; 2420 | z-index: 2; 2421 | margin: 0 0; 2422 | } 2423 | 2424 | .hbtn.hb-border-off2-br3 { 2425 | position: relative; 2426 | transition-duration: .3s; 2427 | overflow: visible; 2428 | box-sizing: border-box; 2429 | border: none; 2430 | padding: 10px 22px; 2431 | } 2432 | 2433 | .hbtn.hb-border-off2-br3:after { 2434 | box-sizing: border-box; 2435 | position: absolute; 2436 | width: 100%; 2437 | height: 100%; 2438 | content: ''; 2439 | border: solid 2px #ffffff; 2440 | z-index: 2; 2441 | margin: 0 0; 2442 | } 2443 | 2444 | .hbtn.hb-border-off3-br3 { 2445 | position: relative; 2446 | transition-duration: .3s; 2447 | overflow: visible; 2448 | box-sizing: border-box; 2449 | border: none; 2450 | padding: 10px 22px; 2451 | } 2452 | 2453 | .hbtn.hb-border-off3-br3:after { 2454 | box-sizing: border-box; 2455 | position: absolute; 2456 | width: 100%; 2457 | height: 100%; 2458 | content: ''; 2459 | border: solid 2px #ffffff; 2460 | z-index: 2; 2461 | margin: 0 0; 2462 | } 2463 | 2464 | .hbtn.hb-border-top-br3 { 2465 | position: relative; 2466 | transition-duration: .3s; 2467 | overflow: visible; 2468 | box-sizing: border-box; 2469 | border: none; 2470 | padding: 10px 22px; 2471 | } 2472 | 2473 | .hbtn.hb-border-top-br3:after { 2474 | box-sizing: border-box; 2475 | position: absolute; 2476 | width: 100%; 2477 | height: 100%; 2478 | content: ''; 2479 | border: solid 2px #ffffff; 2480 | z-index: 2; 2481 | margin: 0 0; 2482 | } 2483 | 2484 | .hbtn.hb-border-right-br3 { 2485 | position: relative; 2486 | transition-duration: .3s; 2487 | overflow: visible; 2488 | box-sizing: border-box; 2489 | border: none; 2490 | padding: 10px 22px; 2491 | } 2492 | 2493 | .hbtn.hb-border-right-br3:after { 2494 | box-sizing: border-box; 2495 | position: absolute; 2496 | width: 100%; 2497 | height: 100%; 2498 | content: ''; 2499 | border: solid 2px #ffffff; 2500 | z-index: 2; 2501 | margin: 0 0; 2502 | } 2503 | 2504 | .hbtn.hb-border-bottom-br3 { 2505 | position: relative; 2506 | transition-duration: .3s; 2507 | overflow: visible; 2508 | box-sizing: border-box; 2509 | border: none; 2510 | padding: 10px 22px; 2511 | } 2512 | 2513 | .hbtn.hb-border-bottom-br3:after { 2514 | box-sizing: border-box; 2515 | position: absolute; 2516 | width: 100%; 2517 | height: 100%; 2518 | content: ''; 2519 | border: solid 2px #ffffff; 2520 | z-index: 2; 2521 | margin: 0 0; 2522 | } 2523 | 2524 | .hbtn.hb-border-left-br3 { 2525 | position: relative; 2526 | transition-duration: .3s; 2527 | overflow: visible; 2528 | box-sizing: border-box; 2529 | border: none; 2530 | padding: 10px 22px; 2531 | } 2532 | 2533 | .hbtn.hb-border-left-br3:after { 2534 | box-sizing: border-box; 2535 | position: absolute; 2536 | width: 100%; 2537 | height: 100%; 2538 | content: ''; 2539 | border: solid 2px #ffffff; 2540 | z-index: 2; 2541 | margin: 0 0; 2542 | } 2543 | 2544 | .hbtn.hb-border-bottom-br3:after { 2545 | left: 0; 2546 | bottom: 0; 2547 | border-top-width: 2px; 2548 | transition: border-top-width 0.1s 0.2s, height 0.2s 0.1s, width 0.2s 0.0s, margin 0.2s 0.0s; 2549 | } 2550 | 2551 | .hbtn.hb-border-bottom-br3:hover:after { 2552 | width: 60%; 2553 | height: 0px; 2554 | border-width: 2px; 2555 | border-top-width: 0px; 2556 | margin: 0 20%; 2557 | transition: border-top-width 0.1s 0.0s, height 0.2s 0.1s, width 0.2s 0.2s, margin 0.2s 0.2s; 2558 | } 2559 | 2560 | .hbtn.hb-border-left-br3:after { 2561 | bottom: 0; 2562 | left: 0; 2563 | border-right-width: 2px; 2564 | transition: border-right-width 0.1s 0.2s, width 0.2s 0.1s, height 0.2s 0.0s, margin 0.2s 0.0s; 2565 | } 2566 | 2567 | .hbtn.hb-border-left-br3:hover:after { 2568 | width: 0; 2569 | height: 60%; 2570 | border-width: 2px; 2571 | border-right-width: 0px; 2572 | margin: 5% 0; 2573 | transition: border-right-width 0.1s 0.0s, width 0.2s 0.1s, height 0.2s 0.2s, margin 0.2s 0.2s; 2574 | } 2575 | 2576 | .hbtn.hb-border-top-br3:after { 2577 | top: 0; 2578 | right: 0; 2579 | border-bottom-width: 2px; 2580 | transition: border-bottom-width 0.1s 0.2s, height 0.2s 0.1s, width 0.2s 0.0s, margin 0.2s 0.0s; 2581 | } 2582 | 2583 | .hbtn.hb-border-top-br3:hover:after { 2584 | width: 60%; 2585 | height: 0; 2586 | border-width: 2px; 2587 | border-bottom-width: 0px; 2588 | margin: 0 20%; 2589 | transition: border-bottom-width 0.1s 0.0s, height 0.2s 0.1s, width 0.2s 0.2s, margin 0.2s 0.2s; 2590 | } 2591 | 2592 | .hbtn.hb-border-right-br3:after { 2593 | bottom: 0; 2594 | right: 0; 2595 | border-left-width: 2px; 2596 | transition: border-left-width 0.1s 0.2s, width 0.2s 0.1s, height 0.2s 0.0s, margin 0.2s 0.0s; 2597 | } 2598 | 2599 | .hbtn.hb-border-right-br3:hover:after { 2600 | width: 0; 2601 | height: 60%; 2602 | border-width: 2px; 2603 | border-left-width: 0px; 2604 | margin: 5% 0; 2605 | transition: border-left-width 0.1s 0.0s, width 0.2s 0.1s, height 0.2s 0.2s, margin 0.2s 0.2s; 2606 | } 2607 | 2608 | .hpill.hb-border-off-br4:after { 2609 | border-radius: 50px; 2610 | } 2611 | 2612 | .hpill.hb-border-off2-br4:after { 2613 | border-radius: 50px; 2614 | } 2615 | 2616 | .hpill.hb-border-off3-br4:after { 2617 | border-radius: 50px; 2618 | } 2619 | 2620 | .hpill.hb-border-top-br4:after { 2621 | border-radius: 50px; 2622 | } 2623 | 2624 | .hpill.hb-border-right-br4:after { 2625 | border-radius: 50px; 2626 | } 2627 | 2628 | .hpill.hb-border-bottom-br4:after { 2629 | border-radius: 50px; 2630 | } 2631 | 2632 | .hpill.hb-border-left-br4:after { 2633 | border-radius: 50px; 2634 | } 2635 | 2636 | .hbtn.hb-border-off-br4 { 2637 | position: relative; 2638 | transition-duration: .3s; 2639 | overflow: visible; 2640 | box-sizing: border-box; 2641 | border: none; 2642 | padding: 10px 22px; 2643 | } 2644 | 2645 | .hbtn.hb-border-off-br4:after { 2646 | box-sizing: border-box; 2647 | position: absolute; 2648 | width: 100%; 2649 | height: 100%; 2650 | content: ''; 2651 | border: solid 2px #ffffff; 2652 | z-index: 2; 2653 | margin: 0 0; 2654 | } 2655 | 2656 | .hbtn.hb-border-off2-br4 { 2657 | position: relative; 2658 | transition-duration: .3s; 2659 | overflow: visible; 2660 | box-sizing: border-box; 2661 | border: none; 2662 | padding: 10px 22px; 2663 | } 2664 | 2665 | .hbtn.hb-border-off2-br4:after { 2666 | box-sizing: border-box; 2667 | position: absolute; 2668 | width: 100%; 2669 | height: 100%; 2670 | content: ''; 2671 | border: solid 2px #ffffff; 2672 | z-index: 2; 2673 | margin: 0 0; 2674 | } 2675 | 2676 | .hbtn.hb-border-off3-br4 { 2677 | position: relative; 2678 | transition-duration: .3s; 2679 | overflow: visible; 2680 | box-sizing: border-box; 2681 | border: none; 2682 | padding: 10px 22px; 2683 | } 2684 | 2685 | .hbtn.hb-border-off3-br4:after { 2686 | box-sizing: border-box; 2687 | position: absolute; 2688 | width: 100%; 2689 | height: 100%; 2690 | content: ''; 2691 | border: solid 2px #ffffff; 2692 | z-index: 2; 2693 | margin: 0 0; 2694 | } 2695 | 2696 | .hbtn.hb-border-top-br4 { 2697 | position: relative; 2698 | transition-duration: .3s; 2699 | overflow: visible; 2700 | box-sizing: border-box; 2701 | border: none; 2702 | padding: 10px 22px; 2703 | } 2704 | 2705 | .hbtn.hb-border-top-br4:after { 2706 | box-sizing: border-box; 2707 | position: absolute; 2708 | width: 100%; 2709 | height: 100%; 2710 | content: ''; 2711 | border: solid 2px #ffffff; 2712 | z-index: 2; 2713 | margin: 0 0; 2714 | } 2715 | 2716 | .hbtn.hb-border-right-br4 { 2717 | position: relative; 2718 | transition-duration: .3s; 2719 | overflow: visible; 2720 | box-sizing: border-box; 2721 | border: none; 2722 | padding: 10px 22px; 2723 | } 2724 | 2725 | .hbtn.hb-border-right-br4:after { 2726 | box-sizing: border-box; 2727 | position: absolute; 2728 | width: 100%; 2729 | height: 100%; 2730 | content: ''; 2731 | border: solid 2px #ffffff; 2732 | z-index: 2; 2733 | margin: 0 0; 2734 | } 2735 | 2736 | .hbtn.hb-border-bottom-br4 { 2737 | position: relative; 2738 | transition-duration: .3s; 2739 | overflow: visible; 2740 | box-sizing: border-box; 2741 | border: none; 2742 | padding: 10px 22px; 2743 | } 2744 | 2745 | .hbtn.hb-border-bottom-br4:after { 2746 | box-sizing: border-box; 2747 | position: absolute; 2748 | width: 100%; 2749 | height: 100%; 2750 | content: ''; 2751 | border: solid 2px #ffffff; 2752 | z-index: 2; 2753 | margin: 0 0; 2754 | } 2755 | 2756 | .hbtn.hb-border-left-br4 { 2757 | position: relative; 2758 | transition-duration: .3s; 2759 | overflow: visible; 2760 | box-sizing: border-box; 2761 | border: none; 2762 | padding: 10px 22px; 2763 | } 2764 | 2765 | .hbtn.hb-border-left-br4:after { 2766 | box-sizing: border-box; 2767 | position: absolute; 2768 | width: 100%; 2769 | height: 100%; 2770 | content: ''; 2771 | border: solid 2px #ffffff; 2772 | z-index: 2; 2773 | margin: 0 0; 2774 | } 2775 | 2776 | .hbtn.hb-border-bottom-br4:after { 2777 | left: 0; 2778 | bottom: 0; 2779 | border-top-width: 2px; 2780 | transition: border-top-width 0.1s 0.2s, height 0.2s 0.1s, width 0.2s 0.0s, margin 0.2s 0.0s, border-bottom-width 0.2s 0.0s; 2781 | } 2782 | 2783 | .hbtn.hb-border-bottom-br4:hover:after { 2784 | width: 60%; 2785 | height: 0px; 2786 | border-width: 2px; 2787 | border-top-width: 0px; 2788 | border-bottom-width: 4px; 2789 | margin: 0 20%; 2790 | transition: border-top-width 0.1s 0.0s, height 0.2s 0.1s, width 0.2s 0.2s, margin 0.2s 0.2s, border-bottom-width 0.2s 0.2s; 2791 | } 2792 | 2793 | .hbtn.hb-border-left-br4:after { 2794 | bottom: 0; 2795 | left: 0; 2796 | border-right-width: 2px; 2797 | transition: border-right-width 0.1s 0.2s, width 0.2s 0.1s, height 0.2s 0.0s, margin 0.2s 0.0s, border-left-width 0.2s 0.0s; 2798 | } 2799 | 2800 | .hbtn.hb-border-left-br4:hover:after { 2801 | width: 0; 2802 | height: 60%; 2803 | border-width: 2px; 2804 | border-right-width: 0px; 2805 | border-left-width: 4px; 2806 | margin: 5% 0; 2807 | transition: border-right-width 0.1s 0.0s, width 0.2s 0.1s, height 0.2s 0.2s, margin 0.2s 0.2s, border-left-width 0.2s 0.2s; 2808 | } 2809 | 2810 | .hbtn.hb-border-top-br4:after { 2811 | top: 0; 2812 | right: 0; 2813 | border-bottom-width: 2px; 2814 | transition: border-bottom-width 0.1s 0.2s, height 0.2s 0.1s, width 0.2s 0.0s, margin 0.2s 0.0s, border-top-width 0.2s 0.0s; 2815 | } 2816 | 2817 | .hbtn.hb-border-top-br4:hover:after { 2818 | width: 60%; 2819 | height: 0; 2820 | border-width: 2px; 2821 | border-bottom-width: 0px; 2822 | border-top-width: 4px; 2823 | margin: 0 20%; 2824 | transition: border-bottom-width 0.1s 0.0s, height 0.2s 0.1s, width 0.2s 0.2s, margin 0.2s 0.2s, border-top-width 0.2s 0.2s; 2825 | } 2826 | 2827 | .hbtn.hb-border-right-br4:after { 2828 | bottom: 0; 2829 | right: 0; 2830 | border-left-width: 2px; 2831 | transition: border-left-width 0.1s 0.2s, width 0.2s 0.1s, height 0.2s 0.0s, margin 0.2s 0.0s, border-right-width 0.2s 0.0s; 2832 | } 2833 | 2834 | .hbtn.hb-border-right-br4:hover:after { 2835 | width: 0; 2836 | height: 60%; 2837 | border-width: 2px; 2838 | border-left-width: 0px; 2839 | border-right-width: 4px; 2840 | margin: 5% 0; 2841 | transition: border-left-width 0.1s 0.0s, width 0.2s 0.1s, height 0.2s 0.2s, margin 0.2s 0.2s, border-right-width 0.2s 0.2s; 2842 | } 2843 | -------------------------------------------------------------------------------- /demo/backgrounds/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Varin6/Hover-Buttons/c14b32203bed1aca1e967c33b856f7224f00912a/demo/backgrounds/1.jpg -------------------------------------------------------------------------------- /demo/backgrounds/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Varin6/Hover-Buttons/c14b32203bed1aca1e967c33b856f7224f00912a/demo/backgrounds/2.jpg -------------------------------------------------------------------------------- /demo/backgrounds/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Varin6/Hover-Buttons/c14b32203bed1aca1e967c33b856f7224f00912a/demo/backgrounds/3.jpg -------------------------------------------------------------------------------- /demo/backgrounds/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Varin6/Hover-Buttons/c14b32203bed1aca1e967c33b856f7224f00912a/demo/backgrounds/4.jpg -------------------------------------------------------------------------------- /demo/backgrounds/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Varin6/Hover-Buttons/c14b32203bed1aca1e967c33b856f7224f00912a/demo/backgrounds/5.jpg -------------------------------------------------------------------------------- /demo/backgrounds/hb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Varin6/Hover-Buttons/c14b32203bed1aca1e967c33b856f7224f00912a/demo/backgrounds/hb2.jpg -------------------------------------------------------------------------------- /demo/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | outline: none; 4 | } 5 | 6 | html, body { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | body { 12 | background: #1e1e1e; 13 | position: relative; 14 | } 15 | 16 | .body-overlay { 17 | position: fixed; 18 | top: 0; 19 | left: 0; 20 | background-size: cover; 21 | background-position: center center; 22 | background-attachment: fixed; 23 | width: 100vw; 24 | height: 100vh; 25 | z-index: -1; 26 | opacity: 1; 27 | transition: opacity 0.3s linear; 28 | } 29 | 30 | .body-overlay:after { 31 | position: fixed; 32 | content: ''; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | z-index: -1; 38 | background-color: rgba(0, 0, 0, 0.55); 39 | } 40 | 41 | .hidden { 42 | opacity: 0; 43 | } 44 | 45 | .hbor1 { 46 | border-width: 1px; 47 | } 48 | 49 | .hbor1:after, .hbor1:before { 50 | border-width: 1px !important; 51 | } 52 | 53 | .hbor2 { 54 | border-width: 2px; 55 | } 56 | 57 | .hbor2:after, .hbor2:before { 58 | border-width: 2px !important; 59 | } 60 | 61 | .hbor3 { 62 | border-width: 3px; 63 | } 64 | 65 | .hbor3:after, .hbor3:before { 66 | border-width: 3px !important; 67 | } 68 | 69 | .hbor4 { 70 | border-width: 4px; 71 | } 72 | 73 | .hbor4:after, .hbor4:before { 74 | border-width: 4px !important; 75 | } 76 | 77 | .hbor5 { 78 | border-width: 5px; 79 | } 80 | 81 | .hbor5:after, .hbor5:before { 82 | border-width: 5px !important; 83 | } 84 | 85 | .hpad1 { 86 | padding: 8px 20px !important; 87 | } 88 | 89 | .hpad2 { 90 | padding: 12px 24px !important; 91 | } 92 | 93 | .hpad3 { 94 | padding: 16px 28px !important; 95 | } 96 | 97 | .hpad4 { 98 | padding: 20px 32px !important; 99 | } 100 | 101 | .hpad5 { 102 | padding: 24px 36px !important; 103 | } 104 | 105 | h1, h2, h3, h4, h5, h6 { 106 | color: #ffffff; 107 | font-family: "Righteous", serif; 108 | font-weight: 400; 109 | } 110 | 111 | h3 { 112 | font-size: 3rem; 113 | margin-bottom: 15px; 114 | } 115 | 116 | h4 { 117 | font-size: 2rem; 118 | margin-bottom: 15px; 119 | margin-top: 50px; 120 | } 121 | 122 | h5 { 123 | font-size: 1.4rem; 124 | -ms-flex-item-align: start; 125 | -webkit-align-self: flex-start; 126 | align-self: flex-start; 127 | margin-bottom: 10px; 128 | margin-top: 15px; 129 | } 130 | 131 | .lead { 132 | font-family: "Righteous", serif; 133 | } 134 | 135 | .body-wrap { 136 | padding: 30px 30px; 137 | color: #ffffff; 138 | display: -ms-flexbox; 139 | display: -webkit-box; 140 | display: -webkit-flex; 141 | display: flex; 142 | -ms-flex-pack: center; 143 | -webkit-justify-content: center; 144 | justify-content: center; 145 | -ms-flex-align: start; 146 | -webkit-align-items: flex-start; 147 | align-items: flex-start; 148 | -ms-flex-wrap: wrap; 149 | -webkit-flex-wrap: wrap; 150 | flex-wrap: wrap; 151 | margin: 0; 152 | font-family: "Lato", sans-serif; 153 | margin-bottom: 250px; 154 | } 155 | 156 | .body-wrap--light { 157 | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#424242+0,1e1e1e+100&1+0,0+100 */ 158 | /* FF3.6-15 */ 159 | /* Chrome10-25,Safari5.1-6 */ 160 | background: linear-gradient(to bottom, #424242 0%, rgba(30, 30, 30, 0) 100%); 161 | /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 162 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#001e1e1e',GradientType=0 ); 163 | /* IE6-9 */ 164 | margin: 0; 165 | } 166 | 167 | .container { 168 | padding: 20px 15px; 169 | width: 100%; 170 | text-align: center; 171 | } 172 | 173 | .container.bg-color { 174 | background: #1e1e1e !important; 175 | } 176 | 177 | .container h3 { 178 | font-size: 3rem; 179 | } 180 | 181 | .options { 182 | padding: 10px; 183 | } 184 | 185 | .options a { 186 | margin: 0 4px; 187 | } 188 | 189 | .options h5 { 190 | margin-top: 0; 191 | margin-bottom: 6px; 192 | } 193 | 194 | .options-fixed { 195 | position: fixed; 196 | left: 0; 197 | top: 0; 198 | width: 100%; 199 | background: #1e1e1e; 200 | border-bottom: 1px solid #ebebeb; 201 | background: rgba(30, 30, 30, 0.9); 202 | z-index: 5; 203 | } 204 | 205 | .buttons-wrapper { 206 | display: -ms-flexbox; 207 | display: -webkit-box; 208 | display: -webkit-flex; 209 | display: flex; 210 | -ms-flex-align: center; 211 | -webkit-align-items: center; 212 | align-items: center; 213 | -ms-flex-pack: center; 214 | -webkit-justify-content: center; 215 | justify-content: center; 216 | -ms-flex-wrap: wrap; 217 | -webkit-flex-wrap: wrap; 218 | flex-wrap: wrap; 219 | width: 100%; 220 | margin: 20px 0 50px 0; 221 | } 222 | 223 | .buttons-wrapper iframe { 224 | margin: 0 10px !important; 225 | margin-bottom: 10px !important; 226 | } 227 | 228 | .hsmall { 229 | font-size: 12px; 230 | padding: 4px 10px !important; 231 | } 232 | 233 | .class-helper { 234 | background: #1e1e1e; 235 | border-top: 2px solid #ebebeb; 236 | padding: 30px 30px 50px 30px; 237 | color: #ffffff; 238 | -ms-flex-pack: center; 239 | -webkit-justify-content: center; 240 | justify-content: center; 241 | -ms-flex-align: center; 242 | -webkit-align-items: center; 243 | align-items: center; 244 | font-family: "Lato", sans-serif; 245 | font-size: 1.6rem; 246 | position: fixed; 247 | bottom: 0; 248 | left: 0; 249 | width: 100%; 250 | display: none; 251 | -ms-flex-wrap: wrap; 252 | -webkit-flex-wrap: wrap; 253 | flex-wrap: wrap; 254 | } 255 | 256 | .class-helper__inner { 257 | display: -ms-flexbox; 258 | display: -webkit-box; 259 | display: -webkit-flex; 260 | display: flex; 261 | -ms-flex-wrap: wrap; 262 | -webkit-flex-wrap: wrap; 263 | flex-wrap: wrap; 264 | -ms-flex-pack: center; 265 | -webkit-justify-content: center; 266 | justify-content: center; 267 | -ms-flex-align: center; 268 | -webkit-align-items: center; 269 | align-items: center; 270 | font-family: "Lato", sans-serif; 271 | font-size: 1rem; 272 | } 273 | 274 | .class-helper__inner h4 { 275 | width: 100%; 276 | margin: 15px 0; 277 | } 278 | 279 | .class-helper__inner pre { 280 | width: 100%; 281 | background: #383838; 282 | } 283 | 284 | .class-helper__inner2 { 285 | -ms-flex-wrap: wrap; 286 | -webkit-flex-wrap: wrap; 287 | flex-wrap: wrap; 288 | max-height: 30vh; 289 | overflow-Y: scroll; 290 | background: #383838; 291 | } 292 | 293 | .class-helper__inner2 h4 { 294 | width: 100%; 295 | margin: 15px 0; 296 | } 297 | 298 | .class-helper__inner2 pre { 299 | white-space: pre-wrap; 300 | font-size: 1rem; 301 | text-align: left !important; 302 | } 303 | 304 | .class-helper .close-icon { 305 | position: absolute; 306 | top: 15px; 307 | right: 30px; 308 | } 309 | 310 | .hbtn-x { 311 | margin: 0; 312 | } 313 | 314 | @media only screen and (max-width: 768px) { 315 | .body-wrap { 316 | -ms-flex-wrap: wrap; 317 | -webkit-flex-wrap: wrap; 318 | flex-wrap: wrap; 319 | padding: 0; 320 | } 321 | .options { 322 | padding: 10px; 323 | } 324 | .class-helper { 325 | font-size: 1.2rem; 326 | } 327 | .class-helper pre { 328 | white-space: pre-wrap; 329 | text-align: center; 330 | } 331 | .class-helper .close-icon { 332 | position: absolute; 333 | top: auto; 334 | bottom: 15px; 335 | right: 30px; 336 | } 337 | } 338 | -------------------------------------------------------------------------------- /demo/css/style.scss: -------------------------------------------------------------------------------- 1 | $font:'Righteous', serif; 2 | $font2:'Lato', sans-serif; 3 | @import '../../scss/variables'; 4 | 5 | 6 | * { 7 | box-sizing: border-box; 8 | outline: none; 9 | } 10 | 11 | html, body { 12 | margin:0; 13 | padding:0; 14 | } 15 | 16 | body { 17 | background: #1e1e1e; 18 | position: relative; 19 | } 20 | 21 | .body-overlay { 22 | position: fixed; 23 | top:0; 24 | left:0; 25 | background-size:cover; 26 | background-position:center center; 27 | background-attachment:fixed; 28 | width: 100vw; 29 | height: 100vh; 30 | z-index: -1; 31 | opacity:1; 32 | transition: opacity 0.3s linear; 33 | &:after { 34 | position: fixed; 35 | content: ''; 36 | top:0; 37 | left:0; 38 | width: 100%; 39 | height: 100%; 40 | z-index: -1; 41 | background-color: rgba(#000, 0.55); 42 | } 43 | } 44 | 45 | .hidden { 46 | opacity:0; 47 | } 48 | 49 | 50 | 51 | .hbor1 { 52 | border-width: 1px; 53 | &:after, &:before { 54 | border-width: 1px !important; 55 | } 56 | } 57 | .hbor2 { 58 | border-width: 2px; 59 | &:after, &:before { 60 | border-width: 2px !important; 61 | } 62 | } 63 | .hbor3 { 64 | border-width: 3px; 65 | &:after, &:before { 66 | border-width: 3px !important; 67 | } 68 | } 69 | .hbor4 { 70 | border-width: 4px; 71 | &:after, &:before { 72 | border-width: 4px !important; 73 | } 74 | } 75 | .hbor5 { 76 | border-width: 5px; 77 | &:after, &:before { 78 | border-width: 5px !important; 79 | } 80 | } 81 | 82 | .hpad1 { 83 | padding: $paddingY $paddingX !important; 84 | &:after { 85 | //padding: $paddingY $paddingX !important; 86 | } 87 | } 88 | .hpad2 { 89 | padding: $paddingY + 4 $paddingX + 4 !important; 90 | &:after { 91 | //padding: $paddingY + 4 $paddingX + 4!important; 92 | } 93 | } 94 | .hpad3 { 95 | padding: $paddingY + 8 $paddingX + 8 !important; 96 | &:after { 97 | //padding: $paddingY + 8 $paddingX + 8 !important; 98 | } 99 | } 100 | .hpad4 { 101 | padding: $paddingY + 12 $paddingX + 12 !important; 102 | &:after { 103 | //padding: $paddingY + 12 $paddingX + 12 !important; 104 | } 105 | } 106 | .hpad5 { 107 | padding: $paddingY + 16 $paddingX + 16 !important; 108 | &:after { 109 | //border-width: 5px !important; 110 | } 111 | } 112 | 113 | 114 | h1,h2,h3,h4,h5,h6 { 115 | color: #ffffff; 116 | font-family: $font; 117 | font-weight: 400; 118 | } 119 | 120 | h3 { 121 | font-size: 3rem; 122 | margin-bottom: 15px; 123 | } 124 | h4 { 125 | font-size: 2rem; 126 | margin-bottom:15px; 127 | margin-top:50px; 128 | } 129 | h5 { 130 | font-size:1.4rem; 131 | align-self: flex-start; 132 | margin-bottom: 10px; 133 | margin-top:15px; 134 | } 135 | 136 | .lead { 137 | font-family: $font; 138 | } 139 | 140 | 141 | 142 | 143 | .body-wrap { 144 | padding: 30px 30px; 145 | color: #ffffff; 146 | display: flex; 147 | justify-content: center; 148 | align-items:flex-start; 149 | flex-wrap: wrap; 150 | margin: 0; 151 | font-family: $font2; 152 | margin-bottom: 250px; 153 | &--light { 154 | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#424242+0,1e1e1e+100&1+0,0+100 */ 155 | background: -moz-linear-gradient(top, rgba(66,66,66,1) 0%, rgba(30,30,30,0) 100%); /* FF3.6-15 */ 156 | background: -webkit-linear-gradient(top, rgba(66,66,66,1) 0%,rgba(30,30,30,0) 100%); /* Chrome10-25,Safari5.1-6 */ 157 | background: linear-gradient(to bottom, rgba(66,66,66,1) 0%,rgba(30,30,30,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 158 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#001e1e1e',GradientType=0 ); /* IE6-9 */ 159 | margin:0; 160 | 161 | } 162 | } 163 | 164 | .container { 165 | padding:20px 15px; 166 | width: 100%; 167 | text-align: center; 168 | &.bg-color { 169 | background: #1e1e1e !important; 170 | } 171 | h3 { 172 | font-size:3rem; 173 | } 174 | } 175 | 176 | .options { 177 | a { 178 | margin: 0 4px; 179 | } 180 | h5 { 181 | margin-top:0; 182 | margin-bottom: 6px; 183 | } 184 | padding: 10px; 185 | } 186 | 187 | .options-fixed { 188 | position: fixed; 189 | left:0; 190 | top:0; 191 | width: 100%; 192 | background: #1e1e1e; 193 | border-bottom: 1px solid #ebebeb; 194 | background: rgba(#1e1e1e, 0.9); 195 | z-index: 5; 196 | } 197 | 198 | .buttons-wrapper { 199 | display: flex; 200 | align-items: center; 201 | justify-content: center; 202 | flex-wrap: wrap; 203 | width: 100%; 204 | margin: 20px 0 50px 0; 205 | iframe { 206 | margin: 0 10px !important; 207 | margin-bottom: 10px !important; 208 | } 209 | } 210 | 211 | .hsmall { 212 | font-size: 12px; 213 | padding: 4px 10px !important; 214 | &:after { 215 | //padding: 4px 10px; 216 | } 217 | &:before { 218 | //padding: 4px 10px; 219 | } 220 | } 221 | 222 | .class-helper { 223 | background: #1e1e1e; 224 | border-top: 2px solid #ebebeb; 225 | padding: 30px 30px 50px 30px; 226 | color: #ffffff; 227 | justify-content: center; 228 | align-items: center; 229 | font-family: $font2; 230 | font-size: 1.6rem; 231 | position: fixed; 232 | bottom:0; 233 | left:0; 234 | width: 100%; 235 | display: none; 236 | flex-wrap: wrap; 237 | 238 | &__inner { 239 | display: flex; 240 | flex-wrap: wrap; 241 | justify-content: center; 242 | align-items: center; 243 | font-family: $font2; 244 | font-size: 1rem; 245 | h4 { 246 | width: 100%; 247 | margin: 15px 0; 248 | } 249 | pre { 250 | width: 100%; 251 | background: #383838; 252 | } 253 | } 254 | &__inner2 { 255 | h4 { 256 | width: 100%; 257 | margin: 15px 0; 258 | } 259 | flex-wrap: wrap; 260 | max-height: 30vh; 261 | overflow-Y: scroll; 262 | background: #383838; 263 | pre { 264 | white-space: pre-wrap; 265 | font-size: 1rem; 266 | text-align: left !important; 267 | 268 | 269 | } 270 | } 271 | .close-icon { 272 | position: absolute; 273 | top:15px; 274 | right: 30px; 275 | } 276 | } 277 | 278 | .hbtn-x { 279 | margin:0; 280 | } 281 | 282 | @media only screen and (max-width: 768px) { 283 | 284 | .body-wrap { 285 | flex-wrap: wrap; 286 | padding:0; 287 | } 288 | 289 | .options { 290 | padding:10px; 291 | } 292 | 293 | .class-helper { 294 | font-size: 1.2rem; 295 | pre { 296 | white-space: pre-wrap; 297 | text-align: center; 298 | } 299 | .close-icon { 300 | position: absolute; 301 | top:auto; 302 | bottom:15px; 303 | right: 30px; 304 | } 305 | } 306 | 307 | 308 | } 309 | 310 | -------------------------------------------------------------------------------- /demo/js/functions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Varin on 30/07/2017. 3 | */ 4 | 5 | $(function () { 6 | setTimeout(helperInit, 100); 7 | }); 8 | 9 | 10 | 11 | function helperInit () { 12 | $('.hbtn').not($('.hbtn-x')).on('click', function (e) { 13 | e.preventDefault(); 14 | var outer = $(this).prop('outerHTML'); 15 | //console.log(outer); 16 | klon = $(this).clone().css('margin-right', '20px'); 17 | 18 | $('.class-helper .class-helper__inner').css('display', 'flex').empty().prepend('

HTML:

CSS:
').prepend(klon);
 19 |         $('.class-helper .class-helper__inner pre').text(outer);
 20 |         $('.class-helper').slideDown();
 21 |     });
 22 | }
 23 | 
 24 | // Change Button Style
 25 | $(function () {
 26 |     $('.changeStyle').on('click', function (e) {
 27 |         e.preventDefault();
 28 |         $('.hbtn').not($('.hbtn-x')).toggleClass('hpill');
 29 |         $(this).toggleClass('hpill');
 30 |         $('.class-helper').slideUp();
 31 |         $(this).text(function(i, text){
 32 |             return text === "RECTANGLE" ? "PILL" : "RECTANGLE";
 33 |         });
 34 |     });
 35 | });
 36 | 
 37 | //changes background to image
 38 | $(function () {
 39 |     $('.changeBackground').on('click', function (e) {
 40 |         e.preventDefault();
 41 |         if ($('.body-overlay').hasClass('hidden')) {
 42 | 
 43 |             var imagesArray = [
 44 |                 'url("demo/backgrounds/1.jpg")',
 45 |                 'url("demo/backgrounds/2.jpg")',
 46 |                 'url("demo/backgrounds/3.jpg")',
 47 |                 'url("demo/backgrounds/4.jpg")',
 48 |                 'url("demo/backgrounds/5.jpg")'
 49 |             ];
 50 |             var randBackground = Math.floor(Math.random() * (imagesArray.length));
 51 |             $('.body-overlay').removeClass('hidden').css('background-image', imagesArray[randBackground]);
 52 | 
 53 |             $('.class-helper').slideUp();
 54 |         } else {
 55 |             $('.body-overlay').addClass('hidden');
 56 | 
 57 |         }
 58 |     });
 59 | });
 60 | 
 61 | // Border change
 62 | $(function () {
 63 |     button = $('.hbtn').not($('.hbtn-x'));
 64 |     $('.changeBorder').on('click', function (e) {
 65 |         e.preventDefault();
 66 |         console.log(button.css('border-width'))
 67 |         if (button.css('border-width') == '1px') {
 68 |             button.removeClass('hbor1 hbor3 hbor4 hbor5')
 69 |             button.addClass('hbor2')
 70 |         }
 71 |         else if (button.css('border-width') == '2px') {
 72 |             button.removeClass('hbor1 hbor2 hbor4 hbor5')
 73 |             button.addClass('hbor3')
 74 |         }
 75 |         else if (button.css('border-width') == '3px') {
 76 |             button.removeClass('hbor1 hbor2 hbor3 hbor5')
 77 |             button.addClass('hbor4')
 78 |         }
 79 |         else if (button.css('border-width') == '4px') {
 80 |             button.removeClass('hbor1 hbor3 hbor3 hbor4')
 81 |             button.addClass('hbor5')
 82 |         }
 83 |         else if (button.css('border-width') == '5px') {
 84 |             button.removeClass('hbor2 hbor3 hbor4 hbor5')
 85 |             button.addClass('hbor1')
 86 |         }
 87 |     });
 88 | });
 89 | 
 90 | 
 91 | 
 92 | // Padding change
 93 | $(function () {
 94 | 
 95 |     button = $('.hbtn').not($('.hbtn-x'));
 96 | 
 97 |     $('.changePadding').on('click', function (e) {
 98 |         e.preventDefault();
 99 | 
100 | 
101 |         //console.log($('.hbtn').hasClass('hpad1', 'hpad2', 'hpad3', 'hpad4', 'hpad5'));
102 |         //console.log(button.css('border-width'))
103 |         if (button.is('.hpad1, .hpad2, .hpad3, .hpad4, .hpad5') == false) {
104 | 
105 |             button.addClass('hpad2');
106 |         }
107 |         else if (button.hasClass('hpad2')) {
108 |             button.removeClass('hpad2');
109 |             button.addClass('hpad3');
110 |         }
111 |         else if (button.hasClass('hpad3')) {
112 |             button.removeClass('hpad3');
113 |             button.addClass('hpad4');
114 |         }
115 |         else if (button.hasClass('hpad4')) {
116 |             button.removeClass('hpad4');
117 |             button.addClass('hpad5');
118 |         }
119 |         else if (button.hasClass('hpad5')) {
120 |             button.removeClass('hpad5');
121 |             button.addClass('hpad2');
122 |         }
123 |     });
124 | });
125 | 
126 | // function hasBorders(myClass, myClass2) {
127 | //     button.each(function () {
128 | //         borders = /border/.test($(this).attr("class"));
129 | //         if (borders == false) {
130 | //             $(this).addClass(myClass)
131 | //         } else {
132 | //             $(this).addClass(myClass2)
133 | //         }
134 | //     });
135 | // }
136 | 
137 | $(function () {
138 |    var imagesArray = [
139 |                 'url("demo/backgrounds/1.jpg")',
140 |                 'url("demo/backgrounds/2.jpg")',
141 |                 'url("demo/backgrounds/3.jpg")',
142 |                 'url("demo/backgrounds/4.jpg")',
143 |                 'url("demo/backgrounds/5.jpg")'
144 |             ];
145 |             var randBackground = Math.floor(Math.random() * (imagesArray.length));
146 |             $('.body-overlay').removeClass('hidden').css('background-image', imagesArray[randBackground]);
147 | });
148 | 
149 | // $(function () {
150 | //     $('.changeColor').on('click', function (e) {
151 | //         e.preventDefault();
152 | //         $('.hbtn').addClass
153 | //     });
154 | // });
155 | 
156 | // Add icons on click.
157 | $(function () {
158 |     $('.changeIcon').on('click', function (e) {
159 |         e.preventDefault();
160 | 
161 |         var iconArray = new Array("glass", "music", "search", "envelope-o", "heart", "star", "star-o", "user", "film", "th-large", "th", "th-list", "check", "remove", "close", "times", "search-plus", "search-minus", "power-off", "signal", "gear", "cog", "trash-o", "home", "file-o", "clock-o", "road", "download", "arrow-circle-o-down", "arrow-circle-o-up", "inbox", "play-circle-o", "rotate-right", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "dedent", "outdent", "indent", "video-camera", "photo", "image", "picture-o", "pencil", "map-marker", "adjust", "tint", "edit", "pencil-square-o", "share-square-o", "check-square-o", "arrows", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-circle", "minus-circle", "times-circle", "check-circle", "question-circle", "info-circle", "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "mail-forward", "share", "expand", "compress", "plus", "minus", "asterisk", "exclamation-circle", "gift", "leaf", "fire", "eye", "eye-slash", "warning", "exclamation-triangle", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder", "folder-open", "arrows-v", "arrows-h", "bar-chart-o", "bar-chart", "twitter-square", "facebook-square", "camera-retro", "key", "gears", "cogs", "comments", "thumbs-o-up", "thumbs-o-down", "star-half", "heart-o", "sign-out", "linkedin-square", "thumb-tack", "external-link", "sign-in", "trophy", "github-square", "upload", "lemon-o", "phone", "square-o", "bookmark-o", "phone-square", "twitter", "facebook-f", "facebook", "github", "unlock", "credit-card", "rss", "hdd-o", "bullhorn", "bell", "certificate", "hand-o-right", "hand-o-left", "hand-o-up", "hand-o-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-circle-down", "globe", "wrench", "tasks", "filter", "briefcase", "arrows-alt", "group", "users", "chain", "link", "cloud", "flask", "cut", "scissors", "copy", "files-o", "paperclip", "save", "floppy-o", "square", "navicon", "reorder", "bars", "list-ul", "list-ol", "strikethrough", "underline", "table", "magic", "truck", "pinterest", "pinterest-square", "google-plus-square", "google-plus", "money", "caret-down", "caret-up", "caret-left", "caret-right", "columns", "unsorted", "sort", "sort-down", "sort-desc", "sort-up", "sort-asc", "envelope", "linkedin", "rotate-left", "undo", "legal", "gavel", "dashboard", "tachometer", "comment-o", "comments-o", "flash", "bolt", "sitemap", "umbrella", "paste", "clipboard", "lightbulb-o", "exchange", "cloud-download", "cloud-upload", "user-md", "stethoscope", "suitcase", "bell-o", "coffee", "cutlery", "file-text-o", "building-o", "hospital-o", "ambulance", "medkit", "fighter-jet", "beer", "h-square", "plus-square", "angle-double-left", "angle-double-right", "angle-double-up", "angle-double-down", "angle-left", "angle-right", "angle-up", "angle-down", "desktop", "laptop", "tablet", "mobile-phone", "mobile", "circle-o", "quote-left", "quote-right", "spinner", "circle", "mail-reply", "reply", "github-alt", "folder-o", "folder-open-o", "smile-o", "frown-o", "meh-o", "gamepad", "keyboard-o", "flag-o", "flag-checkered", "terminal", "code", "mail-reply-all", "reply-all", "star-half-empty", "star-half-full", "star-half-o", "location-arrow", "crop", "code-fork", "unlink", "chain-broken", "question", "info", "exclamation", "superscript", "subscript", "eraser", "puzzle-piece", "microphone", "microphone-slash", "shield", "calendar-o", "fire-extinguisher", "rocket", "maxcdn", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-circle-down", "html5", "css3", "anchor", "unlock-alt", "bullseye", "ellipsis-h", "ellipsis-v", "rss-square", "play-circle", "ticket", "minus-square", "minus-square-o", "level-up", "level-down", "check-square", "pencil-square", "external-link-square", "share-square", "compass", "toggle-down", "caret-square-o-down", "toggle-up", "caret-square-o-up", "toggle-right", "caret-square-o-right", "euro", "eur", "gbp", "dollar", "usd", "rupee", "inr", "cny", "rmb", "yen", "jpy", "ruble", "rouble", "rub", "won", "krw", "bitcoin", "btc", "file", "file-text", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-numeric-asc", "sort-numeric-desc", "thumbs-up", "thumbs-down", "youtube-square", "youtube", "xing", "xing-square", "youtube-play", "dropbox", "stack-overflow", "instagram", "flickr", "adn", "bitbucket", "bitbucket-square", "tumblr", "tumblr-square", "long-arrow-down", "long-arrow-up", "long-arrow-left", "long-arrow-right", "apple", "windows", "android", "linux", "dribbble", "skype", "foursquare", "trello", "female", "male", "gittip", "gratipay", "sun-o", "moon-o", "archive", "bug", "vk", "weibo", "renren", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "toggle-left", "caret-square-o-left", "dot-circle-o", "wheelchair", "vimeo-square", "turkish-lira", "try", "plus-square-o", "space-shuttle", "slack", "envelope-square", "wordpress", "openid", "institution", "bank", "university", "mortar-board", "graduation-cap", "yahoo", "google", "reddit", "reddit-square", "stumbleupon-circle", "stumbleupon", "delicious", "digg", "pied-piper", "pied-piper-alt", "drupal", "joomla", "language", "fax", "building", "child", "paw", "spoon", "cube", "cubes", "behance", "behance-square", "steam", "steam-square", "recycle", "automobile", "car", "cab", "taxi", "tree", "spotify", "deviantart", "soundcloud", "database", "file-pdf-o", "file-word-o", "file-excel-o", "file-powerpoint-o", "file-photo-o", "file-picture-o", "file-image-o", "file-zip-o", "file-archive-o", "file-sound-o", "file-audio-o", "file-movie-o", "file-video-o", "file-code-o", "vine", "codepen", "jsfiddle", "life-bouy", "life-buoy", "life-saver", "support", "life-ring", "circle-o-notch", "ra", "rebel", "ge", "empire", "git-square", "git", "hacker-news", "tencent-weibo", "qq", "wechat", "weixin", "send", "paper-plane", "send-o", "paper-plane-o", "history", "genderless", "circle-thin", "header", "paragraph", "sliders", "share-alt", "share-alt-square", "bomb", "soccer-ball-o", "futbol-o", "tty", "binoculars", "plug", "slideshare", "twitch", "yelp", "newspaper-o", "wifi", "calculator", "paypal", "google-wallet", "cc-visa", "cc-mastercard", "cc-discover", "cc-amex", "cc-paypal", "cc-stripe", "bell-slash", "bell-slash-o", "trash", "copyright", "at", "eyedropper", "paint-brush", "birthday-cake", "area-chart", "pie-chart", "line-chart", "lastfm", "lastfm-square", "toggle-off", "toggle-on", "bicycle", "bus", "ioxhost", "angellist", "cc", "shekel", "sheqel", "ils", "meanpath", "buysellads", "connectdevelop", "dashcube", "forumbee", "leanpub", "sellsy", "shirtsinbulk", "simplybuilt", "skyatlas", "cart-plus", "cart-arrow-down", "diamond", "ship", "user-secret", "motorcycle", "street-view", "heartbeat", "venus", "mars", "mercury", "transgender", "transgender-alt", "venus-double", "mars-double", "venus-mars", "mars-stroke", "mars-stroke-v", "mars-stroke-h", "neuter", "facebook-official", "pinterest-p", "whatsapp", "server", "user-plus", "user-times", "hotel", "bed", "viacoin", "train", "subway", "medium");
162 | 
163 |         $('.hbtn').not($('.hbtn-x')).each(function () {
164 | 
165 |             if ($(this).has('i').length == false ) {
166 |                 var randIcon = Math.floor(Math.random()*(iconArray.length));
167 |                 $(this).prepend('');
168 |             } else {
169 |                 $('i', this).remove();
170 |             }
171 |         });
172 | 
173 |         $('.class-helper').slideUp();
174 | 
175 |     });
176 | });
177 | 
178 | $(function () {
179 |     $('.close-icon').on('click', function () {
180 |         $('.class-helper').slideUp();
181 |     });
182 | });
183 | 
184 | 
185 | // Declare selector variable and stylesheet constant (using 2nd stylesheet from the array)
186 | myClass = '';
187 | const myStylesheet = ($.makeArray(document.styleSheets[2].cssRules)).filter(({ selectorText }) => selectorText && selectorText.includes(myClass));
188 | 
189 | $(function () {
190 |     $('.hbtn').on('click', function () {
191 |         thisButton = $(this);
192 |         classes = $(this).attr('class').split(' ');
193 |         $('.class-helper .class-helper__inner2').css('display', 'flex').empty().prepend('
')
194 |         classes.forEach(function(item1, index, array) {
195 |             item1 = '.' + item1;
196 |             myClass = item1;
197 |             //console.log(thisButton);
198 |             showCss(item1, myStylesheet);
199 |         });
200 |     });
201 | });
202 | 
203 | 
204 | function getSelectorCss(selector, stylesheet) {
205 | 
206 |     // myClass - the class of which CSS we want to grab
207 |     // myStylesheet - Array from the selected stylesheet that matches myClass
208 |     // item - item in the myStylesheet array
209 |     // mySelector - selector from item
210 |     // index - index of the item in the myStylesheet array
211 | 
212 |     theSel = [];
213 |     theCss = [];
214 | 
215 | 
216 |         stylesheet.forEach(function(item, index, array) {
217 |             var mySelector = item.selectorText;
218 |             var selectorRegex = new RegExp(selector.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "(?:[:\\s].*)?$"); //regex rule to match the given class and all variations (:before, :hover etc)
219 |             //console.log(selectorRegex);
220 |             var matchingSelector = mySelector.match(selectorRegex); // Find those selectors that match 'selector' (contains it in some form)
221 |             var finalSelector = '';
222 |             // If mySelector matches:
223 | 
224 |             // console.log(item);
225 |             // console.log(matchingSelector);
226 |             // console.log(selectorRegex);
227 | 
228 |             if (matchingSelector !== null) {
229 |                 //If mySelector contains commas, split it into an array
230 |                 selectorLoopResult = ''; // the ultimate selector used for final result
231 | 
232 |                 //console.log(mySelector);
233 |                 //console.log(thisButton);
234 | 
235 |                 // If it's not a pill -> skip selectors with "pill" in them
236 |                 if (mySelector.match(/hpill/)) {
237 |                     if (!thisButton.hasClass('hpill')) {
238 |                         return;
239 |                     }
240 |                 }
241 | 
242 |                 if (mySelector.match(/,/)) {  //if mySelector has commas:
243 |                      mySelectorArray = mySelector.split(',');  //split into array where commas separate items
244 |                      mySelectorArray.forEach(function(itemP, indexP) {  //cycle through the array
245 |                          regexSelector = new RegExp(selector + '.*');
246 |                          finalSelector = itemP.match(regexSelector);
247 |                          if (finalSelector !== null) {
248 |                              selectorLoopResult = finalSelector[0];
249 |                              return selectorLoopResult;
250 |                          } else {
251 |                              return;
252 |                          }
253 |                     });
254 | 
255 |                 } else {
256 |                     selectorLoopResult = matchingSelector[0];
257 |                 }
258 | 
259 |                 itemCss = item.cssText;
260 |                 itemCss = itemCss.substring(itemCss.indexOf("{"));
261 |                 itemCss = itemCss.replace(/[{}]/g, '');
262 |                 theSelectorIndex = theSel.indexOf(selectorLoopResult);
263 | 
264 |                 //If selector already in the array, find its corresponding CSS
265 |                 // and add to that rule instead of duplicating the same selector rule
266 |                 if (theSelectorIndex == -1) {
267 |                     theSel.push(selectorLoopResult);
268 |                     theCss.push(itemCss);
269 | 
270 |                 } else {
271 | 
272 |                     itemCss = itemCss.substring(1);
273 |                     newCssRule = theCss[theSelectorIndex] + itemCss;
274 |                     theCss[theSelectorIndex] = newCssRule;
275 |                 }
276 |             }
277 |         });
278 |     return [theSel, theCss];
279 | }
280 | 
281 | function showCss(selector, stylesheet) {
282 | 
283 |     buttonStyles = getSelectorCss(selector, stylesheet);
284 | 
285 |     buttonStyles[0].forEach(function(item, index, array) {
286 |        // $('.class-helper .class-helper__inner2 pre').append(' ');
287 |         //console.log(item + index);
288 |         $('.class-helper .class-helper__inner2 pre').append(buttonStyles[0][index] + ' {');
289 |         $('.class-helper .class-helper__inner2 pre').append('
');
290 |         string = buttonStyles[1][index];
291 |         cssArray = string.split(/;/);
292 | 
293 |         cssArray = cleanArray(cssArray)
294 | 
295 |             cssArray.forEach(function(item, index, array) {
296 | 
297 |                     item+= ';';
298 |                     $('.class-helper .class-helper__inner2 pre').append('     ' + item + '
');
299 | 
300 |             });
301 |         $('.class-helper .class-helper__inner2 pre').append('} 
');
302 |         $('.class-helper .class-helper__inner2 pre').append(' ');
303 |         $('.class-helper .class-helper__inner2 pre').append('

');
304 |     });
305 | }
306 | 
307 | 
308 | //removes white space element and duplicates.
309 | function cleanArray(array) {
310 | 
311 |     array2 = [];
312 |     //arraySplit = [];
313 | 
314 |     if (array[array.length-1] == ' ') {
315 |         array.pop();
316 |     }
317 | 
318 |     while (array.length > 0) {
319 |         cssItem = array[array.length-1];
320 |         allIndexes = getAllIndexes(array, cssItem);
321 | 
322 |         if (allIndexes.length > 0) {
323 | 
324 |             for (var i = allIndexes.length -2; i >= 0; i--) {
325 |                 array.splice(allIndexes[i], 1);
326 |             }
327 | 
328 |         }
329 |         array2.push(cssItem);
330 |         array.pop();
331 |     }
332 | 
333 |     return array2.reverse();
334 | }
335 | 
336 | 
337 | //returns array of all indexes for a value (all duplicates)
338 | function getAllIndexes(arr, val) {
339 |     var indexes = [], i = -1;
340 |     while ((i = arr.indexOf(val, i+1)) != -1){
341 |         indexes.push(i);
342 |     }
343 |     return indexes;
344 | }
345 | 
346 | $(function () {
347 |     var distance = $('div').offset().top;
348 |         //console.log(distance);
349 | });
350 | 
351 | var distance = $('.options').offset().top,
352 |     $window = $(window),
353 |     height1 = $('.options').outerHeight();
354 | 
355 | //console.log(height1);
356 | 
357 | 
358 | 
359 | $window.scroll(function() {
360 |     if ( $window.scrollTop() >= distance ) {
361 |         $('.options').addClass('options-fixed');
362 |         $('.body-wrap--light').css('margin-bottom', height1 +'px');
363 |         //console.log(distance);
364 |     }
365 | 
366 |     if ( $window.scrollTop() < distance ) {
367 |         $('.options').removeClass('options-fixed');
368 |         $('.body-wrap--light').css('margin-bottom','0px');
369 |         //console.log(distance);
370 |     }
371 | 
372 | });
373 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | 	
  5 | 	
  6 | 	
  7 | 	
  8 | 	
  9 | 	
 10 | 	
 11 | 	
 12 | 	
 13 | 	
 14 | 	
 15 | 	
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 

 22 | 
 23 | 	

 24 | 		
Hover Buttons

 25 | 		
v0.15

 26 | 		View on Github
 27 | 			

 28 | 				Star
 29 | 				Watch
 30 | 				Follow @varin6
 31 | 				Download
 32 | 			

 33 | 		

 34 | 

 35 | 
 36 | 

 37 | 
 38 | 		

 39 | 				
Options:

 40 | 			PILL
 41 | 
 42 | 			ICONS
 43 | 
 44 | 			BACKGROUND
 45 | 
 46 | 			BORDER
 47 | 
 48 | 			PADDING
 49 | 
 50 | 			
 51 | 
 52 | 		

 53 | 
 54 | 		

 55 | 			
Fill Transitions

 56 | 		

 57 | 
 58 | 		

 59 | 			
Set 1

 60 | 			
Simple reveal/hide animation

 61 | 			Fade In
 62 | 			Slide Up
 63 | 			Slide Right
 64 | 			Slide Down
 65 | 			Slide Left
 66 | 
 67 | 			Slide Middle
 68 | 			Slide Middle
 69 | 
 70 | 			

 71 | 
 72 | 			Fade Out
 73 | 			Reveal Top
 74 | 			Reveal Right
 75 | 			Reveal Bottom
 76 | 			Reveal Left
 77 | 
 78 | 			Reveal Middle
 79 | 			Reveal Middle
 80 | 		

 81 | 
 82 | 		

 83 | 			
Set 2

 84 | 			
Simple reveal/hide animation with background opacity transition

 85 | 
 86 | 			Slide Up 2
 87 | 			Slide Right 2
 88 | 			Slide Down 2
 89 | 			Slide Left 2
 90 | 
 91 | 			Slide Middle
 92 | 			Slide Middle
 93 | 
 94 | 			

 95 | 
 96 | 			Reveal Top 2
 97 | 			Reveal Right 2
 98 | 			Reveal Bottom 2
 99 | 			Reveal Left 2
100 | 
101 | 			Reveal Middle
102 | 			Reveal Middle
103 | 
104 | 		

105 | 
106 | 		

107 | 			
Set 3

108 | 			
Simple reveal/hide animation with border accent

109 | 			Slide Up 3
110 | 			Slide Right 3
111 | 			Slide Down 3
112 | 			Slide Left 3
113 | 
114 | 			Slide Middle
115 | 			Slide Middle
116 | 
117 | 			

118 | 
119 | 			Reveal Top 3
120 | 			Reveal Right 3
121 | 			Reveal Bottom 3
122 | 			Reveal Left 3
123 | 
124 | 			Reveal Middle
125 | 			Reveal Middle
126 | 		

127 | 
128 | 		

129 | 			
Set 4

130 | 			
Simple reveal/hide animation with background opacity and border accent

131 | 			Slide Up 4
132 | 			Slide Right 4
133 | 			Slide Down 4
134 | 			Slide Left 4
135 | 
136 | 			Slide Middle
137 | 			Slide Middle
138 | 
139 | 			

140 | 
141 | 			Reveal Top 4
142 | 			Reveal Right 4
143 | 			Reveal Bottom 4
144 | 			Reveal Left 4
145 | 
146 | 			Reveal Middle
147 | 			Reveal Middle
148 | 
149 | 	

150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 		

158 | 			
Border Transitions

159 | 		

160 | 
161 | 		

162 | 			
Set 1

163 | 			
Border opacity

164 | 			Border Fade
165 | 			Border Reverse
166 | 			Border Spin
167 | 			Border Top
168 | 			Border Right
169 | 			Border Bottom
170 | 			Border Left
171 | 		

172 | 
173 | 		

174 | 			
Set 2

175 | 			
Border opacity

176 | 			Fade Top
177 | 			Fade Right
178 | 			Fade Bottom
179 | 			Fade Left
180 | 		

181 | 
182 | 		

183 | 			
Set 3

184 | 			
Border opacity with border accent

185 | 
186 | 			Fade Top 2
187 | 			Fade Right 2
188 | 			Fade Bottom 2
189 | 			Fade Left 2
190 | 
191 | 		

192 | 
193 | 		

194 | 			
Set 4

195 | 			
Border opacity with border accent

196 | 
197 | 			Fade Top 3
198 | 			Fade Right 3
199 | 			Fade Bottom 3
200 | 			Fade Left 3
201 | 
202 | 		

203 | 
204 | 	

205 | 		
Set 5

206 | 		
Border detail

207 | 
208 | 		Detail Top
209 | 		Detail Right
210 | 		Detail Bottom
211 | 		Detail Left
212 | 
213 | 	

214 | 
215 | 	

216 | 		
Set 6

217 | 		
Border detail

218 | 
219 | 		Detail Top 2
220 | 		Detail Right 2
221 | 		Detail Bottom 2
222 | 		Detail Left 2
223 | 
224 | 	

225 | 
226 | 

227 | 
228 | 

229 | 	
230 | 	

231 | 	

232 | 

233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
 5 |     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
 6 |     "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
 7 |   },
 8 |   "devDependencies": {
 9 |     "cross-env": "^3.2.4",
10 |     "laravel-mix": "^0.10.0",
11 |     "webpack-livereload-plugin": "^0.11.0"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/scss/_base.scss:
--------------------------------------------------------------------------------
 1 | //===================================
 2 | // Base Buttons Style
 3 | //===================================
 4 | 
 5 | .hbtn {
 6 |   position: relative;
 7 |   box-sizing: border-box;
 8 |   display: inline-block;
 9 |   overflow: hidden;
10 |   padding: $paddingY $paddingX;
11 |   margin: 0 3px 6px 3px;
12 |   text-align: center;
13 |   border: solid $btnborder $btncolor;
14 |   text-decoration: none;
15 |   color: $btncolor;
16 |   white-space: nowrap;
17 |   z-index: 0;
18 |   i {
19 |     padding-right: 8px;
20 |   }
21 | }
22 | 
23 | 
24 | .hpill {
25 |   border-radius: 50px;
26 | }
27 | 


--------------------------------------------------------------------------------
/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | //Border width
 2 | $btnborder: 2px;
 3 | 
 4 | //Border and fill color
 5 | $btncolor: #ffffff;
 6 | 
 7 | //Button text color
 8 | $txtcolor: #ffffff;
 9 | 
10 | //Alternative button text color for background transitions
11 | $txtcolorfill: #000000;
12 | 
13 | //Button Padding
14 | $paddingY: 8px;
15 | $paddingX: 20px;


--------------------------------------------------------------------------------
/scss/hoverbuttons.scss:
--------------------------------------------------------------------------------
 1 | //===================================
 2 | // Variables
 3 | //===================================
 4 | 
 5 | @import 'variables';
 6 | 
 7 | //===================================
 8 | // Base style of the buttons
 9 | //===================================
10 | 
11 | @import 'base';
12 | 
13 | //===================================
14 | // Fill Transitions
15 | //===================================
16 | 
17 | 
18 | @import 'transitions/fill/fill';  // Core fill transition styles (DON'T REMOVE)
19 | 
20 | @import 'transitions/fill/set01'; // Fill Transitions Set 01 (option)
21 | @import 'transitions/fill/set02'; // Fill Transitions Set 02 (option)
22 | @import 'transitions/fill/set03'; // Fill Transitions Set 03 (option)
23 | @import 'transitions/fill/set04'; // Fill Transitions Set 04 (option)
24 | 
25 | 
26 | //===================================
27 | // Border Transitions
28 | //===================================
29 | 
30 | @import 'transitions/border/border';  // Core border transition styles (DON'T REMOVE)
31 | 
32 | @import 'transitions/border/set01';   // Border Transitions Set 01 (option)
33 | @import 'transitions/border/set02';   // Border Transitions Set 02 (option)
34 | @import 'transitions/border/set03';   // Border Transitions Set 03 (option)
35 | @import 'transitions/border/set04';   // Border Transitions Set 04 (option)
36 | @import 'transitions/border/set05';   // Border Transitions Set 05 (option)
37 | @import 'transitions/border/set06';   // Border Transitions Set 06 (option)
38 | 


--------------------------------------------------------------------------------
/scss/transitions/border/_border.scss:
--------------------------------------------------------------------------------
 1 | //===================================
 2 | // Border Transitions Variables/Arrays
 3 | //===================================
 4 | 
 5 | 
 6 | // properties array: [border color], [:hover border color]
 7 | $borderproperties:(
 8 | 
 9 |   //group 1
10 |         "-off" $btncolor transparent,
11 |         "-off2" $btncolor initial,
12 |         "-off3" $btncolor initial,
13 |         "-top" $btncolor initial,
14 |         "-right" $btncolor initial,
15 |         "-bottom" $btncolor initial,
16 |         "-left" $btncolor initial,
17 | );
18 | 
19 | 
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/scss/transitions/border/_set01.scss:
--------------------------------------------------------------------------------
  1 | //===================================
  2 | // Border Transitions - Set 01
  3 | //===================================
  4 | 
  5 | 
  6 | // Loop adding properties to classes
  7 | 
  8 | .hpill {
  9 |   @each $type in $borderproperties {
 10 |     &.hb-border#{nth($type, 1)} {
 11 |       &:after {
 12 |         border-radius: 50px;
 13 |       }
 14 |     }
 15 |   }
 16 | }
 17 | 
 18 | .hbtn {
 19 |   @each $type in $borderproperties {
 20 |     &.hb-border#{nth($type, 1)} {
 21 |       border-color: nth($type, 2);
 22 |       transition-duration: .3s;
 23 |       &:hover {
 24 |         border-color: nth($type, 3);
 25 |       }
 26 |     }
 27 |   }
 28 |   &.hb-border-off2 {
 29 |     transition: border-top-color 0.1s 0.21s linear,
 30 |     border-right-color 0.1s 0.14s linear,
 31 |     border-bottom-color 0.1s 0.07s linear,
 32 |     border-left-color 0.1s 0s linear;
 33 |     &:hover {
 34 |       border-top-color: transparent;
 35 |       border-right-color: transparent;
 36 |       border-bottom-color: transparent;
 37 |       border-left-color: transparent;
 38 |       transition: border-top-color 0.1s 0s linear,
 39 |       border-right-color 0.1s 0.07s linear,
 40 |       border-bottom-color 0.1s 0.14s linear,
 41 |       border-left-color 0.1s 0.21s linear;
 42 |     }
 43 |   }
 44 |   &.hb-border-off3 {
 45 |     transition: border-top-color 0.1s 0s linear,
 46 |     border-right-color 0.1s 0.07s linear,
 47 |     border-bottom-color 0.1s 0.14s linear,
 48 |     border-left-color 0.1s 0.21s linear;
 49 |     &:hover {
 50 |       border-top-color: transparent;
 51 |       border-right-color: transparent;
 52 |       border-bottom-color: transparent;
 53 |       border-left-color: transparent;
 54 |       transition: border-top-color 0.1s 0s linear,
 55 |       border-right-color 0.1s 0.07s linear,
 56 |       border-bottom-color 0.1s 0.14s linear,
 57 |       border-left-color 0.1s 0.21s linear;
 58 |     }
 59 |   }
 60 |   &.hb-border-top {
 61 |     transition: border-right-color 0.1s 0.14s linear,
 62 |     border-bottom-color 0.1s 0.07s linear,
 63 |     border-left-color 0.1s 0s linear;
 64 |     &:hover {
 65 |       border-right-color: transparent;
 66 |       border-bottom-color: transparent;
 67 |       border-left-color: transparent;
 68 |       transition: border-right-color 0.1s 0s linear,
 69 |       border-bottom-color 0.1s 0.07s linear,
 70 |       border-left-color 0.1s 0.14s linear;
 71 |     }
 72 |   }
 73 |   &.hb-border-right {
 74 |     transition: border-bottom-color 0.1s 0.14s linear,
 75 |     border-left-color 0.1s 0.07s linear,
 76 |     border-top-color 0.1s 0s linear;
 77 |     &:hover {
 78 |       border-bottom-color: transparent;
 79 |       border-left-color: transparent;
 80 |       border-top-color: transparent;
 81 |       transition: border-bottom-color 0.1s 0s linear,
 82 |       border-left-color 0.1s 0.07s linear,
 83 |       border-top-color 0.1s 0.14s linear;
 84 |     }
 85 |   }
 86 |   &.hb-border-bottom {
 87 |     transition: border-left-color 0.1s 0.14s linear,
 88 |     border-top-color 0.1s 0.07s linear,
 89 |     border-right-color 0.1s 0s linear;
 90 |     &:hover {
 91 |       border-left-color: transparent;
 92 |       border-top-color: transparent;
 93 |       border-right-color: transparent;
 94 |       transition: border-left-color 0.1s 0s linear,
 95 |       border-top-color 0.1s 0.07s linear,
 96 |       border-right-color 0.1s 0.14s linear;
 97 |     }
 98 |   }
 99 |   &.hb-border-left {
100 |     transition: border-top-color 0.1s 0.14s linear,
101 |     border-right-color 0.1s 0.07s linear,
102 |     border-bottom-color 0.1s 0s linear;
103 |     &:hover {
104 |       border-top-color: transparent;
105 |       border-right-color: transparent;
106 |       border-bottom-color: transparent;
107 |       transition: border-top-color 0.1s 0s linear,
108 |       border-right-color 0.1s 0.07s linear,
109 |       border-bottom-color 0.1s 0.14s linear;
110 |     }
111 |   }
112 | }


--------------------------------------------------------------------------------
/scss/transitions/border/_set02.scss:
--------------------------------------------------------------------------------
 1 | //===================================
 2 | // Border Transitions - Set 02
 3 | //===================================
 4 | 
 5 | 
 6 | // Loop adding properties to classes
 7 | 
 8 | .hpill {
 9 |   @each $type in $borderproperties {
10 |     &.hb-border#{nth($type, 1)} {
11 |       &:after {
12 |         border-radius: 50px;
13 |       }
14 |     }
15 |   }
16 | }
17 | 
18 | .hbtn {
19 |   @each $type in $borderproperties {
20 |     &.hb-border#{nth($type, 1)}2 {
21 |       border-color: nth($type, 2);
22 |       transition-duration: .3s;
23 |       &:hover {
24 |         border-color: nth($type, 3);
25 |       }
26 |     }
27 |   }
28 |   &.hb-border-top2 {
29 |     transition: all 0.2s 0s linear;
30 |     &:hover {
31 |       border-right-color: transparent;
32 |       border-bottom-color: transparent;
33 |       border-left-color: transparent;
34 |       transition: all 0.2s 0s linear;
35 |     }
36 |   }
37 |   &.hb-border-right2 {
38 |     transition: all 0.2s 0s linear;
39 |     &:hover {
40 |       border-bottom-color: transparent;
41 |       border-left-color: transparent;
42 |       border-top-color: transparent;
43 |       transition: all 0.2s 0s linear;
44 |     }
45 |   }
46 |   &.hb-border-bottom2 {
47 |     transition: all 0.2s 0s linear;
48 |     &:hover {
49 |       border-left-color: transparent;
50 |       border-top-color: transparent;
51 |       border-right-color: transparent;
52 |       transition: all 0.2s 0s linear;
53 |     }
54 |   }
55 |   &.hb-border-left2 {
56 |     transition: all 0.2s 0s linear;
57 |     &:hover {
58 |       border-top-color: transparent;
59 |       border-right-color: transparent;
60 |       border-bottom-color: transparent;
61 |       transition: all 0.2s 0s linear;
62 |     }
63 |   }
64 | }


--------------------------------------------------------------------------------
/scss/transitions/border/_set03.scss:
--------------------------------------------------------------------------------
  1 | //===================================
  2 | // Border Transitions - Set 03
  3 | //===================================
  4 | 
  5 | 
  6 | // Loop adding properties to classes
  7 | 
  8 | .hpill {
  9 |   @each $type in $borderproperties {
 10 |     &.hb-border#{nth($type, 1)} {
 11 |       &-br {
 12 |         &:after {
 13 |           border-radius: 50px;
 14 |         }
 15 |       }
 16 |     }
 17 |   }
 18 | }
 19 | 
 20 | .hbtn {
 21 |   @each $type in $borderproperties {
 22 |     &.hb-border#{nth($type, 1)} {
 23 |       &-br {
 24 |         position: relative;
 25 |         transition-duration: .3s;
 26 |         overflow: visible;
 27 |         box-sizing: border-box;
 28 |         border: none;
 29 |         padding: ($paddingY + 2px) ($paddingX + 2px);
 30 |         &:after {
 31 |           box-sizing: border-box;
 32 |           position: absolute;
 33 |           top: 0;
 34 |           left: 0;
 35 |           width: 100%;
 36 |           height: 100%;
 37 |           content: '';
 38 |           border: solid $btnborder nth($type, 2);
 39 |           z-index: 2;
 40 |         }
 41 |       }
 42 |     }
 43 |   }
 44 |   &.hb-border-top-br {
 45 |     &:after {
 46 |       transition: border-right-color 0.1s 0.14s linear,
 47 |       border-bottom-color 0.1s 0.07s linear,
 48 |       border-left-color 0.1s 0s linear,
 49 |       border-top-width 0.1s 0s linear;
 50 |     }
 51 |     &:hover {
 52 |       &:after {
 53 |         border-right-color: transparent;
 54 |         border-bottom-color: transparent;
 55 |         border-left-color: transparent;
 56 |         border-top-width: $btnborder + 2px;
 57 |         transition: border-right-color 0.1s 0s linear,
 58 |         border-bottom-color 0.1s 0.07s linear,
 59 |         border-left-color 0.1s 0.14s linear,
 60 |         border-top-width 0.1s 0.14s linear;
 61 |       }
 62 |     }
 63 |   }
 64 |   &.hb-border-right-br {
 65 |     &:after {
 66 |       transition: border-bottom-color 0.1s 0.14s linear,
 67 |       border-left-color 0.1s 0.07s linear,
 68 |       border-top-color 0.1s 0s linear,
 69 |       border-right-width 0.1s 0s linear;
 70 |     }
 71 |     &:hover {
 72 |       &:after {
 73 |         border-bottom-color: transparent;
 74 |         border-left-color: transparent;
 75 |         border-top-color: transparent;
 76 |         border-right-width: $btnborder + 2px;
 77 |         transition: border-bottom-color 0.1s 0s linear,
 78 |         border-left-color 0.1s 0.07s linear,
 79 |         border-top-color 0.1s 0.14s linear,
 80 |         border-right-width 0.1s 0.14s linear;
 81 |       }
 82 |     }
 83 |   }
 84 |   &.hb-border-bottom-br {
 85 |     &:after {
 86 |       transition: border-left-color 0.1s 0.14s linear,
 87 |       border-top-color 0.1s 0.07s linear,
 88 |       border-right-color 0.1s 0s linear,
 89 |       border-bottom-width 0.1s 0.14s linear;
 90 |     }
 91 |     &:hover {
 92 |       &:after {
 93 |         border-left-color: transparent;
 94 |         border-top-color: transparent;
 95 |         border-right-color: transparent;
 96 |         border-bottom-width: $btnborder + 2px;
 97 |         transition: border-left-color 0.1s 0s linear,
 98 |         border-top-color 0.1s 0.07s linear,
 99 |         border-right-color 0.1s 0.14s linear,
100 |         border-bottom-width 0.1s 0.14s linear;
101 |       }
102 |     }
103 |   }
104 |   &.hb-border-left-br {
105 |     &:after {
106 |       transition: border-top-color 0.1s 0.14s linear,
107 |       border-right-color 0.1s 0.07s linear,
108 |       border-bottom-color 0.1s 0s linear,
109 |       border-left-width 0.1s 0s linear;
110 |     }
111 |     &:hover {
112 |       &:after {
113 |         border-top-color: transparent;
114 |         border-right-color: transparent;
115 |         border-bottom-color: transparent;
116 |         border-left-width: $btnborder + 2px;
117 |         transition: border-top-color 0.1s 0s linear,
118 |         border-right-color 0.1s 0.07s linear,
119 |         border-bottom-color 0.1s 0.14s linear,
120 |         border-left-width 0.1s 0.14s linear;
121 |       }
122 |     }
123 |   }
124 | }


--------------------------------------------------------------------------------
/scss/transitions/border/_set04.scss:
--------------------------------------------------------------------------------
  1 | //===================================
  2 | // Border Transitions - Set 04
  3 | //===================================
  4 | 
  5 | 
  6 | // Loop adding properties to classes
  7 | 
  8 | .hpill {
  9 |   @each $type in $borderproperties {
 10 |     &.hb-border#{nth($type, 1)} {
 11 |       &-br2 {
 12 |         &:after {
 13 |           border-radius: 50px;
 14 |         }
 15 |       }
 16 |     }
 17 |   }
 18 | }
 19 | 
 20 | 
 21 | .hbtn {
 22 |   @each $type in $borderproperties {
 23 |     &.hb-border#{nth($type, 1)} {
 24 |       &-br2 {
 25 |         position: relative;
 26 |         transition-duration: .2s;
 27 |         overflow: visible;
 28 |         box-sizing: border-box;
 29 |         border: none;
 30 |         padding: ($paddingY + 2px) ($paddingX + 2px);
 31 |         &:after {
 32 |           box-sizing: border-box;
 33 |           position: absolute;
 34 |           top: 0;
 35 |           left: 0;
 36 |           width: 100%;
 37 |           height: 100%;
 38 |           content: '';
 39 |           border: solid $btnborder nth($type, 2);
 40 |           z-index: 2;
 41 |         }
 42 |       }
 43 |     }
 44 |   }
 45 |   &.hb-border-top-br2 {
 46 |     &:after {
 47 |       transition: all 0.2s linear;
 48 |     }
 49 |     &:hover {
 50 |       &:after {
 51 |         border-right-color: transparent;
 52 |         border-bottom-color: transparent;
 53 |         border-left-color: transparent;
 54 |         border-top-width: $btnborder + 2px;
 55 |         transition: all 0.2s linear;
 56 |       }
 57 |     }
 58 |   }
 59 |   &.hb-border-right-br2 {
 60 |     &:after {
 61 |       transition: all 0.2s linear;
 62 |     }
 63 |     &:hover {
 64 |       &:after {
 65 |         border-bottom-color: transparent;
 66 |         border-left-color: transparent;
 67 |         border-top-color: transparent;
 68 |         border-right-width: $btnborder + 2px;
 69 |         transition: all 0.2s linear;
 70 |       }
 71 |     }
 72 |   }
 73 |   &.hb-border-bottom-br2 {
 74 |     &:after {
 75 |       transition: all 0.2s linear;
 76 |     }
 77 |     &:hover {
 78 |       &:after {
 79 |         border-left-color: transparent;
 80 |         border-top-color: transparent;
 81 |         border-right-color: transparent;
 82 |         border-bottom-width: $btnborder + 2px;
 83 |         transition: all 0.2s linear;
 84 |       }
 85 |     }
 86 |   }
 87 |   &.hb-border-left-br2 {
 88 |     &:after {
 89 |       transition: all 0.2s linear;
 90 |     }
 91 |     &:hover {
 92 |       &:after {
 93 |         border-top-color: transparent;
 94 |         border-right-color: transparent;
 95 |         border-bottom-color: transparent;
 96 |         border-left-width: $btnborder + 2px;
 97 |         transition: all 0.2s linear;
 98 |       }
 99 |     }
100 |   }
101 | }


--------------------------------------------------------------------------------
/scss/transitions/border/_set05.scss:
--------------------------------------------------------------------------------
  1 | //===================================
  2 | // Border Transitions - Set 04
  3 | //===================================
  4 | 
  5 | 
  6 | // Loop adding properties to classes
  7 | 
  8 | .hpill {
  9 |   @each $type in $borderproperties {
 10 |     &.hb-border#{nth($type, 1)} {
 11 |       &-br3 {
 12 |         &:after {
 13 |           border-radius: 50px;
 14 |         }
 15 |       }
 16 |     }
 17 |   }
 18 | }
 19 | 
 20 | .hbtn {
 21 |   @each $type in $borderproperties {
 22 |     &.hb-border#{nth($type, 1)} {
 23 |       &-br3 {
 24 |         position: relative;
 25 |         transition-duration: .3s;
 26 |         overflow: visible;
 27 |         box-sizing: border-box;
 28 |         border: none;
 29 |         padding: ($paddingY + 2px) ($paddingX + 2px);
 30 |         &:after {
 31 |           box-sizing: border-box;
 32 |           position: absolute;
 33 |           //left: 0;
 34 |           width: 100%;
 35 |           height: 100%;
 36 |           content: '';
 37 |           border: solid $btnborder nth($type, 2);
 38 |           z-index: 2;
 39 |           margin:0 0;
 40 |         }
 41 |       }
 42 |     }
 43 |   }
 44 |   &.hb-border-bottom-br3 {
 45 |     &:after {
 46 |       left:0;
 47 |       bottom:0;
 48 |       border-top-width:$btnborder;
 49 |       transition:
 50 |               border-top-width 0.1s 0.2s,
 51 |               height  0.2s 0.1s,
 52 |               width   0.2s 0.0s,
 53 |               margin  0.2s 0.0s
 54 |     }
 55 |     &:hover {
 56 |       &:after {
 57 |         width: 60%;
 58 |         height: 0px;
 59 |         border-width: $btnborder;
 60 |         border-top-width:0px;
 61 |         margin: 0 20%;
 62 |         transition:
 63 |                 border-top-width 0.1s 0.0s,
 64 |                 height 0.2s 0.1s,
 65 |                 width  0.2s 0.2s,
 66 |                 margin 0.2s 0.2s;
 67 |       }
 68 |     }
 69 |   }
 70 |   &.hb-border-left-br3 {
 71 |     &:after {
 72 |       bottom:0;
 73 |       left:0;
 74 |       border-right-width:$btnborder;
 75 |       transition:
 76 |               border-right-width 0.1s 0.2s,
 77 |               width  0.2s 0.1s,
 78 |               height   0.2s 0.0s,
 79 |               margin  0.2s 0.0s
 80 |     }
 81 |     &:hover {
 82 |       &:after {
 83 |         width: 0;
 84 |         height: 60%;
 85 |         border-width: $btnborder;
 86 |         border-right-width:0px;
 87 |         margin: 5% 0;
 88 |         transition:
 89 |                 border-right-width 0.1s 0.0s,
 90 |                 width 0.2s 0.1s,
 91 |                 height  0.2s 0.2s,
 92 |                 margin 0.2s 0.2s;
 93 |       }
 94 |     }
 95 |   }
 96 |   &.hb-border-top-br3 {
 97 |     &:after {
 98 |       top:0;
 99 |       right:0;
100 |       border-bottom-width:$btnborder;
101 |       transition:
102 |               border-bottom-width 0.1s 0.2s,
103 |               height  0.2s 0.1s,
104 |               width   0.2s 0.0s,
105 |               margin  0.2s 0.0s
106 |     }
107 |     &:hover {
108 |       &:after {
109 |         width: 60%;
110 |         height: 0;
111 |         border-width: $btnborder;
112 |         border-bottom-width:0px;
113 |         margin: 0 20%;
114 |         transition:
115 |                 border-bottom-width 0.1s 0.0s,
116 |                 height 0.2s 0.1s,
117 |                 width  0.2s 0.2s,
118 |                 margin 0.2s 0.2s;
119 |       }
120 |     }
121 |   }
122 |   &.hb-border-right-br3 {
123 |     &:after {
124 |       bottom:0;
125 |       right:0;
126 |       border-left-width:$btnborder;
127 |       transition:
128 |               border-left-width 0.1s 0.2s,
129 |               width  0.2s 0.1s,
130 |               height   0.2s 0.0s,
131 |               margin  0.2s 0.0s;
132 |     }
133 |     &:hover {
134 |       &:after {
135 |         width: 0;
136 |         height: 60%;
137 |         border-width: $btnborder;
138 |         border-left-width:0px;
139 |         margin: 5% 0;
140 |         transition:
141 |                 border-left-width 0.1s 0.0s,
142 |                 width 0.2s 0.1s,
143 |                 height  0.2s 0.2s,
144 |                 margin 0.2s 0.2s;
145 |       }
146 |     }
147 |   }
148 | }


--------------------------------------------------------------------------------
/scss/transitions/border/_set06.scss:
--------------------------------------------------------------------------------
  1 | //===================================
  2 | // Border Transitions - Set 04
  3 | //===================================
  4 | 
  5 | 
  6 | // Loop adding properties to classes
  7 | 
  8 | .hpill {
  9 |   @each $type in $borderproperties {
 10 |     &.hb-border#{nth($type, 1)} {
 11 |       &-br4 {
 12 |         &:after {
 13 |           border-radius: 50px;
 14 |         }
 15 |       }
 16 |     }
 17 |   }
 18 | }
 19 | 
 20 | .hbtn {
 21 |   @each $type in $borderproperties {
 22 |     &.hb-border#{nth($type, 1)} {
 23 |       &-br4 {
 24 |         position: relative;
 25 |         transition-duration: .3s;
 26 |         overflow: visible;
 27 |         box-sizing: border-box;
 28 |         border: none;
 29 |         padding: ($paddingY + 2px) ($paddingX + 2px);
 30 |         &:after {
 31 |           box-sizing: border-box;
 32 |           position: absolute;
 33 |           width: 100%;
 34 |           height: 100%;
 35 |           content: '';
 36 |           border: solid $btnborder nth($type, 2);
 37 |           z-index: 2;
 38 |           margin:0 0;
 39 |         }
 40 |       }
 41 |     }
 42 |   }
 43 |   &.hb-border-bottom-br4 {
 44 |     &:after {
 45 |       left:0;
 46 |       bottom:0;
 47 |       border-top-width:$btnborder;
 48 |       transition:
 49 |               border-top-width 0.1s 0.2s,
 50 |               height  0.2s 0.1s,
 51 |               width   0.2s 0.0s,
 52 |               margin  0.2s 0.0s,
 53 |               border-bottom-width 0.2s 0.0s;
 54 |     }
 55 |     &:hover {
 56 |       &:after {
 57 |         width: 60%;
 58 |         height: 0px;
 59 |         border-width: $btnborder;
 60 |         border-top-width:0px;
 61 |         border-bottom-width:$btnborder * 2;
 62 |         margin: 0 20%;
 63 |         transition:
 64 |                 border-top-width 0.1s 0.0s,
 65 |                 height 0.2s 0.1s,
 66 |                 width  0.2s 0.2s,
 67 |                 margin 0.2s 0.2s,
 68 |                 border-bottom-width 0.2s 0.2s;
 69 |       }
 70 |     }
 71 |   }
 72 |   &.hb-border-left-br4 {
 73 |     &:after {
 74 |       bottom:0;
 75 |       left:0;
 76 |       border-right-width:$btnborder;
 77 |       transition:
 78 |               border-right-width 0.1s 0.2s,
 79 |               width  0.2s 0.1s,
 80 |               height   0.2s 0.0s,
 81 |               margin  0.2s 0.0s,
 82 |               border-left-width 0.2s 0.0s;
 83 |     }
 84 |     &:hover {
 85 |       &:after {
 86 |         width: 0;
 87 |         height: 60%;
 88 |         border-width: $btnborder;
 89 |         border-right-width:0px;
 90 |         border-left-width: $btnborder * 2;
 91 |         margin: 5% 0;
 92 |         transition:
 93 |                 border-right-width 0.1s 0.0s,
 94 |                 width 0.2s 0.1s,
 95 |                 height  0.2s 0.2s,
 96 |                 margin 0.2s 0.2s,
 97 |                 border-left-width 0.2s 0.2s;
 98 |       }
 99 |     }
100 |   }
101 |   &.hb-border-top-br4 {
102 |     &:after {
103 |       top:0;
104 |       right:0;
105 |       border-bottom-width:$btnborder;
106 |       transition:
107 |               border-bottom-width 0.1s 0.2s,
108 |               height  0.2s 0.1s,
109 |               width   0.2s 0.0s,
110 |               margin  0.2s 0.0s,
111 |               border-top-width 0.2s 0.0s;
112 |     }
113 |     &:hover {
114 |       &:after {
115 |         width: 60%;
116 |         height: 0;
117 |         border-width: $btnborder;
118 |         border-bottom-width:0px;
119 |         border-top-width:$btnborder * 2;
120 |         margin: 0 20%;
121 |         transition:
122 |                 border-bottom-width 0.1s 0.0s,
123 |                 height 0.2s 0.1s,
124 |                 width  0.2s 0.2s,
125 |                 margin 0.2s 0.2s,
126 |                 border-top-width 0.2s 0.2s;
127 |       }
128 |     }
129 |   }
130 |   &.hb-border-right-br4 {
131 |     &:after {
132 |       bottom:0;
133 |       right:0;
134 |       border-left-width:$btnborder;
135 |       transition:
136 |               border-left-width 0.1s 0.2s,
137 |               width  0.2s 0.1s,
138 |               height   0.2s 0.0s,
139 |               margin  0.2s 0.0s,
140 |               border-right-width  0.2s 0.0s;
141 |     }
142 |     &:hover {
143 |       &:after {
144 |         width: 0;
145 |         height: 60%;
146 |         border-width: $btnborder;
147 |         border-left-width:0px;
148 |         border-right-width:$btnborder * 2;
149 |         margin: 5% 0;
150 |         transition:
151 |                 border-left-width 0.1s 0.0s,
152 |                 width 0.2s 0.1s,
153 |                 height  0.2s 0.2s,
154 |                 margin 0.2s 0.2s,
155 |                 border-right-width 0.2s 0.2s;
156 |       }
157 |     }
158 |   }
159 | }


--------------------------------------------------------------------------------
/scss/transitions/fill/_fill.scss:
--------------------------------------------------------------------------------
 1 | //===================================
 2 | // Fill Transitions Variables/Arrays
 3 | //===================================
 4 | 
 5 | 
 6 | // properties array: [suffix], [:before top], [:before right], [:before bottom], [:before left], [:before width], [:before height], [:before opacity], [:hover:before width], [:hover:before height], [:hover:before opacity]
 7 | $fillproperties:(
 8 | 
 9 |   //group 1
10 |         "-on" 0  auto auto 0 100% 100% 0 100% 100% 1,
11 |         "-bottom" 0 auto auto 0 100% 0 1 100% 100% 1,
12 |         "-left" 0 0 auto auto 0 100% 1 100% 100% 1,
13 |         "-top" auto auto 0 0 100% 0 1 100% 100% 1,
14 |         "-right" 0 auto auto 0 0 100% 1 100% 100% 1,
15 |         "-middle" auto auto 0 0 100% 0 1 100% 50% 1,
16 |         "-middle2" 0 0 auto auto 0 100% 1 50% 100% 1,
17 | 
18 |           //group 2
19 |         "-on-rev" 0 auto auto 0 100% 100% 1 100% 100% 0,
20 |         "-bottom-rev" 0 auto auto 0 100% 100% 1 100% 0 1,
21 |         "-left-rev" 0 0 auto auto 100% 100% 1 0 100% 1,
22 |         "-top-rev" auto auto 0 0 100% 100% 1 100% 0 1,
23 |         "-right-rev" 0 auto auto 0 100% 100% 1 0 100% 1,
24 |         "-middle-rev" auto auto 0 0 100% 50% 1 100% 0% 1,
25 |         "-middle2-rev" 0 0 auto auto 50% 100% 1 0 100% 1,
26 | );
27 | 
28 | 


--------------------------------------------------------------------------------
/scss/transitions/fill/_set01.scss:
--------------------------------------------------------------------------------
  1 | @import "fill";
  2 | 
  3 | .hbtn {
  4 |   @each $type in $fillproperties {
  5 |     &.hb-fill#{nth($type, 1)} {
  6 |       &:before {
  7 |         position: absolute;
  8 |         content: '';
  9 |         background: $btncolor;
 10 |         transition-duration: .3s;
 11 |         z-index: -1;
 12 |         top: nth($type, 2);
 13 |         right: nth($type, 3);
 14 |         bottom: nth($type, 4);
 15 |         left: nth($type, 5);
 16 |         width: nth($type, 6);
 17 |         height: nth($type, 7);
 18 |         opacity: nth($type, 8);
 19 |       }
 20 |       &:hover {
 21 |         &:before {
 22 |           width: nth($type, 9);
 23 |           height: nth($type, 10);
 24 |           opacity: nth($type, 11);
 25 |         }
 26 |       }
 27 |     }
 28 |   }
 29 | }
 30 | 
 31 | 
 32 | .hb-fill {
 33 |   &-top, &-right, &-bottom, &-left, &-on, &-middle, &-middle2 {
 34 |     background: transparent;
 35 |     color: $txtcolor;
 36 |     transition: color 0.3s ease,
 37 |     background 0s ease;
 38 |     &:hover {
 39 |       color: $txtcolorfill;
 40 |       background: $btncolor;
 41 |       transition: color 0.3s ease,
 42 |       background 0s 0.3s ease;
 43 |     }
 44 |   }
 45 | }
 46 | 
 47 | .hb-fill {
 48 |   &-top-rev, &-right-rev, &-bottom-rev, &-left-rev, &-on-rev, &-middle-rev, &-middle2-rev {
 49 |     background: $btncolor;
 50 |     color: $txtcolorfill;
 51 |     transition: color 0.3s ease,
 52 |     background 0s 0.3s ease;
 53 |     &:hover {
 54 |       background: transparent;
 55 |       color: $txtcolor;
 56 |       transition: color 0.3s ease,
 57 |       background 0s ease;
 58 |     }
 59 |   }
 60 | }
 61 | 
 62 | .hb-fill-middle {
 63 |   &:after {
 64 |     position: absolute;
 65 |     content: '';
 66 |     background: $btncolor;
 67 |     transition-duration: .3s;
 68 |     z-index: -1;
 69 |     top: 0;
 70 |     right: auto;
 71 |     bottom: auto;
 72 |     left: 0;
 73 |     width: 100%;
 74 |     height: 0;
 75 |     opacity: 1;
 76 |   }
 77 |   &:hover {
 78 |     &:after {
 79 |       height: 50%;
 80 |     }
 81 |   }
 82 | }
 83 | 
 84 | .hb-fill-middle-rev {
 85 |   &:after {
 86 |     position: absolute;
 87 |     content: '';
 88 |     background: $btncolor;
 89 |     transition-duration: .3s;
 90 |     z-index: -1;
 91 |     top: 0;
 92 |     right: auto;
 93 |     bottom: auto;
 94 |     left: 0;
 95 |     width: 100%;
 96 |     height: 50%;
 97 |     opacity: 1;
 98 |   }
 99 |   &:hover {
100 |     &:after {
101 |       height: 0;
102 |     }
103 |   }
104 | }
105 | 
106 | .hb-fill-middle2 {
107 |   &:after {
108 |     position: absolute;
109 |     content: '';
110 |     background: $btncolor;
111 |     transition-duration: .3s;
112 |     z-index: -1;
113 |     top: 0;
114 |     right: auto;
115 |     bottom: auto;
116 |     left: 0;
117 |     width: 0;
118 |     height: 100%;
119 |     opacity: 1;
120 |   }
121 |   &:hover {
122 |     &:after {
123 |       width: 50%;
124 |     }
125 |   }
126 | }
127 | 
128 | .hb-fill-middle2-rev {
129 |   &:after {
130 |     position: absolute;
131 |     content: '';
132 |     background: $btncolor;
133 |     transition-duration: .3s;
134 |     z-index: -1;
135 |     top: 0;
136 |     right: auto;
137 |     bottom: auto;
138 |     left: 0;
139 |     width: 50%;
140 |     height: 100%;
141 |     opacity: 1;
142 |   }
143 |   &:hover {
144 |     &:after {
145 |       width: 0;
146 |     }
147 |   }
148 | }


--------------------------------------------------------------------------------
/scss/transitions/fill/_set02.scss:
--------------------------------------------------------------------------------
  1 | @import "fill";
  2 | 
  3 | .hbtn {
  4 |   @each $type in $fillproperties {
  5 |     &.hb-fill#{nth($type, 1)} {
  6 |       &-bg {
  7 |         &:before {
  8 |           position: absolute;
  9 |           content: '';
 10 |           background: $btncolor;
 11 |           transition-duration: .3s;
 12 |           z-index: -1;
 13 |           top: nth($type, 2);
 14 |           right: nth($type, 3);
 15 |           bottom: nth($type, 4);
 16 |           left: nth($type, 5);
 17 |           width: nth($type, 6);
 18 |           height: nth($type, 7);
 19 |           opacity: nth($type, 8);
 20 |         }
 21 |         &:hover {
 22 |           &:before {
 23 |             width: nth($type, 9);
 24 |             height: nth($type, 10);
 25 |             opacity: nth($type, 11);
 26 |           }
 27 |         }
 28 |       }
 29 |     }
 30 |   }
 31 | }
 32 | 
 33 | .hb-fill {
 34 |   &-top, &-right, &-bottom, &-left, &-on, &-middle, &-middle2 {
 35 |     &-bg {
 36 |       background: transparent;
 37 |       color: $txtcolor;
 38 |       transition: all 0.3s ease;
 39 |       &:hover {
 40 |         color: $txtcolorfill;
 41 |         background: $btncolor;
 42 |         transition: all 0.3s ease;
 43 |       }
 44 |     }
 45 |   }
 46 | }
 47 | 
 48 | .hb-fill {
 49 |   &-top-rev, &-right-rev, &-bottom-rev, &-left-rev, &-on-rev, &-middle-rev, &-middle2-rev {
 50 |     &-bg {
 51 |       background: $btncolor;
 52 |       color: $txtcolorfill;
 53 |       transition: all 0.3s ease;
 54 |       &:hover {
 55 |         background: transparent;
 56 |         color: $txtcolor;
 57 |         transition: all 0.3s ease;
 58 |       }
 59 |     }
 60 |   }
 61 | }
 62 | 
 63 | .hb-fill-middle-bg {
 64 |   &:after {
 65 |     position: absolute;
 66 |     content: '';
 67 |     background: $btncolor;
 68 |     transition-duration: .3s;
 69 |     z-index: -1;
 70 |     top: 0;
 71 |     right: auto;
 72 |     bottom: auto;
 73 |     left: 0;
 74 |     width: 100%;
 75 |     height: 0;
 76 |     opacity: 1;
 77 |   }
 78 |   &:hover {
 79 |     &:after {
 80 |       height: 50%;
 81 |     }
 82 |   }
 83 | }
 84 | 
 85 | .hb-fill-middle-rev-bg {
 86 |   &:after {
 87 |     position: absolute;
 88 |     content: '';
 89 |     background: $btncolor;
 90 |     transition-duration: .3s;
 91 |     z-index: -1;
 92 |     top: 0;
 93 |     right: auto;
 94 |     bottom: auto;
 95 |     left: 0;
 96 |     width: 100%;
 97 |     height: 50%;
 98 |     opacity: 1;
 99 |   }
100 |   &:hover {
101 |     &:after {
102 |       height: 0;
103 |     }
104 |   }
105 | }
106 | 
107 | .hb-fill-middle2-bg {
108 |   &:after {
109 |     position: absolute;
110 |     content: '';
111 |     background: $btncolor;
112 |     transition-duration: .3s;
113 |     z-index: -1;
114 |     top: 0;
115 |     right: auto;
116 |     bottom: auto;
117 |     left: 0;
118 |     width: 0;
119 |     height: 100%;
120 |     opacity: 1;
121 |   }
122 |   &:hover {
123 |     &:after {
124 |       width: 50%;
125 |     }
126 |   }
127 | }
128 | 
129 | .hb-fill-middle2-rev-bg {
130 |   &:after {
131 |     position: absolute;
132 |     content: '';
133 |     background: $btncolor;
134 |     transition-duration: .3s;
135 |     z-index: -1;
136 |     top: 0;
137 |     right: auto;
138 |     bottom: auto;
139 |     left: 0;
140 |     width: 50%;
141 |     height: 100%;
142 |     opacity: 1;
143 |   }
144 |   &:hover {
145 |     &:after {
146 |       width: 0;
147 |     }
148 |   }
149 | }


--------------------------------------------------------------------------------
/scss/transitions/fill/_set03.scss:
--------------------------------------------------------------------------------
  1 | @import "fill";
  2 | 
  3 | .hbtn {
  4 |   @each $type in $fillproperties {
  5 |     &.hb-fill#{nth($type, 1)} {
  6 |       &-br {
  7 |         &:before {
  8 |           position: absolute;
  9 |           content: '';
 10 |           background: $btncolor;
 11 |           transition-duration: .3s;
 12 |           z-index: -1;
 13 |           top: nth($type, 2);
 14 |           right: nth($type, 3);
 15 |           bottom: nth($type, 4);
 16 |           left: nth($type, 5);
 17 |           width: nth($type, 6);
 18 |           height: nth($type, 7);
 19 |           opacity: nth($type, 8);
 20 |           border: solid $btnborder $btncolor;
 21 |         }
 22 |         &:hover {
 23 |           &:before {
 24 |             width: nth($type, 9);
 25 |             height: nth($type, 10);
 26 |             opacity: nth($type, 11);
 27 |           }
 28 |         }
 29 |       }
 30 |     }
 31 |   }
 32 | }
 33 | 
 34 | .hb-fill {
 35 |   &-top, &-right, &-bottom, &-left, &-on, &-middle, &-middle2 {
 36 |     &-br {
 37 |       background: transparent;
 38 |       color: $txtcolor;
 39 |       transition: color 0.3s ease,
 40 |       background 0s ease;
 41 |       &:hover {
 42 |         color: $txtcolorfill;
 43 |         background: $btncolor;
 44 |         transition: color 0.3s ease,
 45 |         background 0s 0.3s ease;
 46 |       }
 47 |     }
 48 |   }
 49 | }
 50 | 
 51 | .hb-fill {
 52 |   &-top-rev, &-right-rev, &-bottom-rev, &-left-rev, &-on-rev, &-middle-rev, &-middle2-rev {
 53 |     &-br {
 54 |       background: $btncolor;
 55 |       color: $txtcolorfill;
 56 |       transition: color 0.3s ease,
 57 |       background 0s 0.3s ease;
 58 |       &:hover {
 59 |         background: transparent;
 60 |         color: $txtcolor;
 61 |         transition: color 0.3s ease,
 62 |         background 0s ease;
 63 |       }
 64 |     }
 65 |   }
 66 | }
 67 | 
 68 | .hb-fill-middle {
 69 |   &-br {
 70 |     &:after {
 71 |       position: absolute;
 72 |       content: '';
 73 |       background: $btncolor;
 74 |       transition-duration: .3s;
 75 |       z-index: -1;
 76 |       top: 0;
 77 |       right: auto;
 78 |       bottom: auto;
 79 |       left: 0;
 80 |       width: 100%;
 81 |       height: 0;
 82 |       opacity: 1;
 83 |       border: solid $btnborder $btncolor;
 84 |     }
 85 |     &:hover {
 86 |       &:after {
 87 |         height: 50%;
 88 |       }
 89 |     }
 90 |   }
 91 | }
 92 | 
 93 | .hb-fill-middle-rev {
 94 |   &-br {
 95 |     &:after {
 96 |       position: absolute;
 97 |       content: '';
 98 |       background: $btncolor;
 99 |       transition-duration: .3s;
100 |       z-index: -1;
101 |       top: 0;
102 |       right: auto;
103 |       bottom: auto;
104 |       left: 0;
105 |       width: 100%;
106 |       height: 50%;
107 |       opacity: 1;
108 |       border: solid $btnborder $btncolor;
109 |     }
110 |     &:hover {
111 |       &:after {
112 |         height: 0;
113 |       }
114 |     }
115 |   }
116 | }
117 | 
118 | .hb-fill-middle2 {
119 |   &-br {
120 |     &:after {
121 |       position: absolute;
122 |       content: '';
123 |       background: $btncolor;
124 |       transition-duration: .3s;
125 |       z-index: -1;
126 |       top: 0;
127 |       right: auto;
128 |       bottom: auto;
129 |       left: 0;
130 |       width: 0;
131 |       height: 100%;
132 |       opacity: 1;
133 |       border: solid $btnborder $btncolor;
134 |     }
135 |     &:hover {
136 |       &:after {
137 |         width: 50%;
138 |       }
139 |     }
140 |   }
141 | }
142 | 
143 | .hb-fill-middle2-rev {
144 |   &-br {
145 |     &:after {
146 |       position: absolute;
147 |       content: '';
148 |       background: $btncolor;
149 |       transition-duration: .3s;
150 |       z-index: -1;
151 |       top: 0;
152 |       right: auto;
153 |       bottom: auto;
154 |       left: 0;
155 |       width: 50%;
156 |       height: 100%;
157 |       opacity: 1;
158 |       border: solid $btnborder $btncolor;
159 |     }
160 |     &:hover {
161 |       &:after {
162 |         width: 0;
163 |       }
164 |     }
165 |   }
166 | }


--------------------------------------------------------------------------------
/scss/transitions/fill/_set04.scss:
--------------------------------------------------------------------------------
  1 | @import "fill";
  2 | 
  3 | .hbtn {
  4 |   @each $type in $fillproperties {
  5 |     &.hb-fill#{nth($type, 1)} {
  6 |       &-bg-br {
  7 |         &:before {
  8 |           position: absolute;
  9 |           content: '';
 10 |           background: $btncolor;
 11 |           transition-duration: .3s;
 12 |           z-index: -1;
 13 |           top: nth($type, 2);
 14 |           right: nth($type, 3);
 15 |           bottom: nth($type, 4);
 16 |           left: nth($type, 5);
 17 |           width: nth($type, 6);
 18 |           height: nth($type, 7);
 19 |           opacity: nth($type, 8);
 20 |           border: solid $btnborder $btncolor;
 21 |         }
 22 |         &:hover {
 23 |           &:before {
 24 |             width: nth($type, 9);
 25 |             height: nth($type, 10);
 26 |             opacity: nth($type, 11);
 27 |           }
 28 |         }
 29 |       }
 30 |     }
 31 |   }
 32 | }
 33 | 
 34 | .hb-fill {
 35 |   &-top, &-right, &-bottom, &-left, &-on, &-middle, &-middle2 {
 36 |     &-bg-br {
 37 |       background: transparent;
 38 |       color: $txtcolor;
 39 |       transition: all 0.3s ease;
 40 |       &:hover {
 41 |         color: $txtcolorfill;
 42 |         background: $btncolor;
 43 |         transition: all 0.3s ease;
 44 |       }
 45 |     }
 46 |   }
 47 | }
 48 | 
 49 | .hb-fill {
 50 |   &-top-rev, &-right-rev, &-bottom-rev, &-left-rev, &-on-rev, &-middle-rev, &-middle2-rev {
 51 |     &-bg-br {
 52 |       background: $btncolor;
 53 |       color: $txtcolorfill;
 54 |       transition: all 0.3s ease;
 55 |       &:hover {
 56 |         background: transparent;
 57 |         color: $txtcolor;
 58 |         transition: all 0.3s ease;
 59 |       }
 60 |     }
 61 |   }
 62 | }
 63 | 
 64 | .hb-fill-middle {
 65 |   &-bg-br {
 66 |     &:after {
 67 |       position: absolute;
 68 |       content: '';
 69 |       background: $btncolor;
 70 |       transition-duration: .3s;
 71 |       z-index: -1;
 72 |       top: 0;
 73 |       right: auto;
 74 |       bottom: auto;
 75 |       left: 0;
 76 |       width: 100%;
 77 |       height: 0;
 78 |       opacity: 1;
 79 |       border: solid $btnborder $btncolor;
 80 |     }
 81 |     &:hover {
 82 |       &:after {
 83 |         height: 50%;
 84 |       }
 85 |     }
 86 |   }
 87 | }
 88 | 
 89 | .hb-fill-middle-rev {
 90 |   &-bg-br {
 91 |     &:after {
 92 |       position: absolute;
 93 |       content: '';
 94 |       background: $btncolor;
 95 |       transition-duration: .3s;
 96 |       z-index: -1;
 97 |       top: 0;
 98 |       right: auto;
 99 |       bottom: auto;
100 |       left: 0;
101 |       width: 100%;
102 |       height: 50%;
103 |       opacity: 1;
104 |       border: solid $btnborder $btncolor;
105 |     }
106 |     &:hover {
107 |       &:after {
108 |         height: 0;
109 |       }
110 |     }
111 |   }
112 | }
113 | 
114 | .hb-fill-middle2 {
115 |   &-bg-br {
116 |     &:after {
117 |       position: absolute;
118 |       content: '';
119 |       background: $btncolor;
120 |       transition-duration: .3s;
121 |       z-index: -1;
122 |       top: 0;
123 |       right: auto;
124 |       bottom: auto;
125 |       left: 0;
126 |       width: 0;
127 |       height: 100%;
128 |       opacity: 1;
129 |       border: solid $btnborder $btncolor;
130 |     }
131 |     &:hover {
132 |       &:after {
133 |         width: 50%;
134 |       }
135 |     }
136 |   }
137 | }
138 | 
139 | .hb-fill-middle2-rev {
140 |   &-bg-br {
141 |     &:after {
142 |       position: absolute;
143 |       content: '';
144 |       background: $btncolor;
145 |       transition-duration: .3s;
146 |       z-index: -1;
147 |       top: 0;
148 |       right: auto;
149 |       bottom: auto;
150 |       left: 0;
151 |       width: 50%;
152 |       height: 100%;
153 |       opacity: 1;
154 |       border: solid $btnborder $btncolor;
155 |     }
156 |     &:hover {
157 |       &:after {
158 |         width: 0;
159 |       }
160 |     }
161 |   }
162 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | let path = require('path');
  2 | let glob = require('glob');
  3 | let webpack = require('webpack');
  4 | let Mix = require('laravel-mix').config;
  5 | let webpackPlugins = require('laravel-mix').plugins;
  6 | 
  7 | /*
  8 |  |--------------------------------------------------------------------------
  9 |  | Mix Initialization
 10 |  |--------------------------------------------------------------------------
 11 |  |
 12 |  | As our first step, we'll require the project's Laravel Mix file
 13 |  | and record the user's requested compilation and build steps.
 14 |  | Once those steps have been recorded, we may get to work.
 15 |  |
 16 |  */
 17 | 
 18 | Mix.initialize();
 19 | 
 20 | 
 21 | 
 22 | /*
 23 |  |--------------------------------------------------------------------------
 24 |  | Webpack Context
 25 |  |--------------------------------------------------------------------------
 26 |  |
 27 |  | This prop will determine the appropriate context, when running Webpack.
 28 |  | Since you have the option of publishing this webpack.config.js file
 29 |  | to your project root, we will dynamically set the path for you.
 30 |  |
 31 |  */
 32 | 
 33 | module.exports.context = Mix.Paths.root();
 34 | 
 35 | 
 36 | 
 37 | /*
 38 |  |--------------------------------------------------------------------------
 39 |  | Webpack Entry
 40 |  |--------------------------------------------------------------------------
 41 |  |
 42 |  | We'll first specify the entry point for Webpack. By default, we'll
 43 |  | assume a single bundled file, but you may call Mix.extract()
 44 |  | to make a separate bundle specifically for vendor libraries.
 45 |  |
 46 |  */
 47 | 
 48 | module.exports.entry = Mix.entry().get();
 49 | 
 50 | 
 51 | 
 52 | /*
 53 |  |--------------------------------------------------------------------------
 54 |  | Webpack Output
 55 |  |--------------------------------------------------------------------------
 56 |  |
 57 |  | Webpack naturally requires us to specify our desired output path and
 58 |  | file name. We'll simply echo what you passed to with Mix.js().
 59 |  | Note that, for Mix.version(), we'll properly hash the file.
 60 |  |
 61 |  */
 62 | 
 63 | module.exports.output = Mix.output();
 64 | 
 65 | 
 66 | 
 67 | /*
 68 |  |--------------------------------------------------------------------------
 69 |  | Rules
 70 |  |--------------------------------------------------------------------------
 71 |  |
 72 |  | Webpack rules allow us to register any number of loaders and options.
 73 |  | Out of the box, we'll provide a handful to get you up and running
 74 |  | as quickly as possible, though feel free to add to this list.
 75 |  |
 76 |  */
 77 | 
 78 | let plugins = [];
 79 | 
 80 | if (Mix.options.extractVueStyles) {
 81 |     var vueExtractTextPlugin = Mix.vueExtractTextPlugin();
 82 | 
 83 |     plugins.push(vueExtractTextPlugin);
 84 | }
 85 | 
 86 | let rules = [
 87 |     {
 88 |         test: /\.vue$/,
 89 |         loader: 'vue-loader',
 90 |         options: {
 91 |             loaders: Mix.options.extractVueStyles ? {
 92 |                 js: 'babel-loader' + Mix.babelConfig(),
 93 |                 scss: vueExtractTextPlugin.extract({
 94 |                     use: 'css-loader!sass-loader',
 95 |                     fallback: 'vue-style-loader'
 96 |                 }),
 97 |                 sass: vueExtractTextPlugin.extract({
 98 |                     use: 'css-loader!sass-loader?indentedSyntax',
 99 |                     fallback: 'vue-style-loader'
100 |                 }),
101 |                 stylus: vueExtractTextPlugin.extract({
102 |                     use: 'css-loader!stylus-loader?paths[]=node_modules',
103 |                     fallback: 'vue-style-loader'
104 |                 }),
105 |                 css: vueExtractTextPlugin.extract({
106 |                     use: 'css-loader',
107 |                     fallback: 'vue-style-loader'
108 |                 })
109 |             }: {
110 |                 js: 'babel-loader' + Mix.babelConfig(),
111 |                 scss: 'vue-style-loader!css-loader!sass-loader',
112 |                 sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
113 |                 stylus: 'vue-style-loader!css-loader!stylus-loader?paths[]=node_modules'
114 |             },
115 | 
116 |             postcss: Mix.options.postCss
117 |         }
118 |     },
119 | 
120 |     {
121 |         test: /\.jsx?$/,
122 |         exclude: /(node_modules|bower_components)/,
123 |         loader: 'babel-loader' + Mix.babelConfig()
124 |     },
125 | 
126 |     {
127 |         test: /\.css$/,
128 |         loaders: ['style-loader', 'css-loader']
129 |     },
130 | 
131 |     {
132 |         test: /\.s[ac]ss$/,
133 |         include: /node_modules/,
134 |         loaders: ['style-loader', 'css-loader', 'sass-loader']
135 |     },
136 | 
137 |     {
138 |         test: /\.html$/,
139 |         loaders: ['html-loader']
140 |     },
141 | 
142 |     {
143 |         test: /\.(png|jpe?g|gif)$/,
144 |         loaders: [
145 |             {
146 |                 loader: 'file-loader',
147 |                 options: {
148 |                     name: path => {
149 |                         if (! /node_modules|bower_components/.test(path)) {
150 |                             return 'images/[name].[ext]?[hash]';
151 |                         }
152 | 
153 |                         return 'images/vendor/' + path
154 |                             .replace(/\\/g, '/')
155 |                             .replace(
156 |                                 /((.*(node_modules|bower_components))|images|image|img|assets)\//g, ''
157 |                             ) + '?[hash]';
158 |                     },
159 |                     publicPath: Mix.options.resourceRoot
160 |                 }
161 |             },
162 |             'img-loader'
163 |         ]
164 |     },
165 | 
166 |     {
167 |         test: /\.(woff2?|ttf|eot|svg|otf)$/,
168 |         loader: 'file-loader',
169 |         options: {
170 |             name: path => {
171 |                 if (! /node_modules|bower_components/.test(path)) {
172 |                     return 'fonts/[name].[ext]?[hash]';
173 |                 }
174 | 
175 |                 return 'fonts/vendor/' + path
176 |                     .replace(/\\/g, '/')
177 |                     .replace(
178 |                         /((.*(node_modules|bower_components))|fonts|font|assets)\//g, ''
179 |                     ) + '?[hash]';
180 |             },
181 |             publicPath: Mix.options.resourceRoot
182 |         }
183 |     },
184 | 
185 |     {
186 |         test: /\.(cur|ani)$/,
187 |         loader: 'file-loader',
188 |         options: {
189 |             name: '[name].[ext]?[hash]',
190 |             publicPath: Mix.options.resourceRoot
191 |         }
192 |     }
193 | ];
194 | 
195 | if (Mix.preprocessors) {
196 |     Mix.preprocessors.forEach(preprocessor => {
197 |         rules.push(preprocessor.rules());
198 | 
199 |         plugins.push(preprocessor.extractPlugin);
200 |     });
201 | }
202 | 
203 | module.exports.module = { rules };
204 | 
205 | 
206 | 
207 | /*
208 |  |--------------------------------------------------------------------------
209 |  | Resolve
210 |  |--------------------------------------------------------------------------
211 |  |
212 |  | Here, we may set any options/aliases that affect Webpack's resolving
213 |  | of modules. To begin, we will provide the necessary Vue alias to
214 |  | load the Vue common library. You may delete this, if needed.
215 |  |
216 |  */
217 | 
218 | module.exports.resolve = {
219 |     extensions: ['*', '.js', '.jsx', '.vue'],
220 | 
221 |     alias: {
222 |         'vue$': 'vue/dist/vue.common.js'
223 |     }
224 | };
225 | 
226 | 
227 | 
228 | /*
229 |  |--------------------------------------------------------------------------
230 |  | Stats
231 |  |--------------------------------------------------------------------------
232 |  |
233 |  | By default, Webpack spits a lot of information out to the terminal,
234 |  | each you time you compile. Let's keep things a bit more minimal
235 |  | and hide a few of those bits and pieces. Adjust as you wish.
236 |  |
237 |  */
238 | 
239 | module.exports.stats = {
240 |     hash: false,
241 |     version: false,
242 |     timings: false,
243 |     children: false,
244 |     errors: false
245 | };
246 | 
247 | process.noDeprecation = true;
248 | 
249 | module.exports.performance = { hints: false };
250 | 
251 | 
252 | 
253 | /*
254 |  |--------------------------------------------------------------------------
255 |  | Devtool
256 |  |--------------------------------------------------------------------------
257 |  |
258 |  | Sourcemaps allow us to access our original source code within the
259 |  | browser, even if we're serving a bundled script or stylesheet.
260 |  | You may activate sourcemaps, by adding Mix.sourceMaps().
261 |  |
262 |  */
263 | 
264 | module.exports.devtool = Mix.options.sourcemaps;
265 | 
266 | 
267 | 
268 | /*
269 |  |--------------------------------------------------------------------------
270 |  | Webpack Dev Server Configuration
271 |  |--------------------------------------------------------------------------
272 |  |
273 |  | If you want to use that flashy hot module replacement feature, then
274 |  | we've got you covered. Here, we'll set some basic initial config
275 |  | for the Node server. You very likely won't want to edit this.
276 |  |
277 |  */
278 | module.exports.devServer = {
279 |     historyApiFallback: true,
280 |     noInfo: true,
281 |     compress: true,
282 |     quiet: true
283 | };
284 | 
285 | 
286 | 
287 | /*
288 |  |--------------------------------------------------------------------------
289 |  | Plugins
290 |  |--------------------------------------------------------------------------
291 |  |
292 |  | Lastly, we'll register a number of plugins to extend and configure
293 |  | Webpack. To get you started, we've included a handful of useful
294 |  | extensions, for versioning, OS notifications, and much more.
295 |  |
296 |  */
297 | 
298 | plugins.push(
299 |     new webpack.ProvidePlugin(Mix.autoload || {}),
300 | 
301 |     new webpackPlugins.FriendlyErrorsWebpackPlugin({ clearConsole: Mix.options.clearConsole }),
302 | 
303 |     new webpackPlugins.StatsWriterPlugin({
304 |         filename: 'mix-manifest.json',
305 |         transform: Mix.manifest.transform.bind(Mix.manifest),
306 |     }),
307 | 
308 |     new webpack.LoaderOptionsPlugin({
309 |         minimize: Mix.inProduction,
310 |         options: {
311 |             postcss: Mix.options.postCss,
312 |             context: __dirname,
313 |             output: { path: './' }
314 |         }
315 |     })
316 | );
317 | 
318 | if (Mix.browserSync) {
319 |     plugins.push(
320 |         new webpackPlugins.BrowserSyncPlugin(
321 |             Object.assign({
322 |                 host: 'localhost',
323 |                 port: 3000,
324 |                 proxy: 'app.dev',
325 |                 files: [
326 |                     'app/**/*.php',
327 |                     'resources/views/**/*.php',
328 |                     'public/js/**/*.js',
329 |                     'public/css/**/*.css'
330 |                 ]
331 |             }, Mix.browserSync),
332 |             {
333 |                 reload: false
334 |             }
335 |         )
336 |     );
337 | }
338 | 
339 | if (Mix.options.notifications) {
340 |     plugins.push(
341 |         new webpackPlugins.WebpackNotifierPlugin({
342 |             title: 'Laravel Mix',
343 |             alwaysNotify: true,
344 |             contentImage: Mix.Paths.root('node_modules/laravel-mix/icons/laravel.png')
345 |         })
346 |     );
347 | }
348 | 
349 | if (Mix.copy) {
350 |     Mix.copy.forEach(copy => {
351 |         plugins.push(
352 |             new webpackPlugins.CopyWebpackPlugin([copy])
353 |         );
354 |     });
355 | }
356 | 
357 | if (Mix.entry().hasExtractions()) {
358 |     plugins.push(
359 |         new webpack.optimize.CommonsChunkPlugin({
360 |             names: Mix.entry().getExtractions(),
361 |             minChunks: Infinity
362 |         })
363 |     );
364 | }
365 | 
366 | if (Mix.options.versioning) {
367 |     plugins.push(
368 |         new webpack[Mix.inProduction ? 'HashedModuleIdsPlugin': 'NamedModulesPlugin'](),
369 |         new webpackPlugins.WebpackChunkHashPlugin()
370 |     );
371 | }
372 | 
373 | if (Mix.options.purifyCss) {
374 |     let PurifyCSSPlugin = require('purifycss-webpack');
375 | 
376 |     // By default, we'll scan all Blade and Vue files in our project.
377 |     let paths = glob.sync(Mix.Paths.root('resources/views/**/*.blade.php')).concat(
378 |         Mix.entry().scripts.reduce((carry, js) => {
379 |             return carry.concat(glob.sync(js.base + '/**/*.vue'));
380 |         }, [])
381 |     );
382 | 
383 |     plugins.push(new PurifyCSSPlugin(
384 |         Object.assign({ paths }, Mix.options.purifyCss, { minimize: Mix.inProduction })
385 |     ));
386 | }
387 | 
388 | if (Mix.inProduction) {
389 |     plugins.push(
390 |         new webpack.DefinePlugin({
391 |             'process.env': {
392 |                 NODE_ENV: '"production"'
393 |             }
394 |         })
395 |     );
396 | 
397 |     if (Mix.options.uglify) {
398 |         plugins.push(
399 |             new webpack.optimize.UglifyJsPlugin(Mix.options.uglify)
400 |         );
401 |     }
402 | }
403 | 
404 | plugins.push(
405 |     new webpackPlugins.WebpackOnBuildPlugin(
406 |         stats => global.events.fire('build', stats)
407 |     )
408 | );
409 | 
410 | if (! Mix.entry().hasScripts()) {
411 |     plugins.push(new webpackPlugins.MockEntryPlugin(Mix.output().path));
412 | }
413 | 
414 | module.exports.plugins = plugins;
415 | 
416 | 
417 | 
418 | /*
419 |  |--------------------------------------------------------------------------
420 |  | Mix Finalizing
421 |  |--------------------------------------------------------------------------
422 |  |
423 |  | Now that we've declared the entirety of our Webpack configuration, the
424 |  | final step is to scan for any custom configuration in the Mix file.
425 |  | If mix.webpackConfig() is called, we'll merge it in, and build!
426 |  |
427 |  */
428 | 
429 | if (Mix.webpackConfig) {
430 |     module.exports = require('webpack-merge').smart(
431 |         module.exports, Mix.webpackConfig
432 |     );
433 | }
434 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | let mix              = require('laravel-mix');
 2 | let LiveReloadPlugin = require('webpack-livereload-plugin');
 3 | 
 4 | mix
 5 |     .disableNotifications()
 6 |     .setPublicPath('../Hover-Buttons')
 7 |     .setResourceRoot('../Hover-Buttons')
 8 |     .options(
 9 |         {
10 |             processCssUrls: false,
11 |             postCss: [
12 |                 require('autoprefixer')({
13 |                     browsers: ['last 5 versions'],
14 |                     cascade: false
15 |                 })
16 |             ]
17 |         })
18 |     .sass('scss/hoverbuttons.scss', 'css/hoverbuttons.css')
19 |     .sass('demo/css/style.scss', 'demo/css/style.css')
20 |     .combine(
21 |         [
22 |             'css/hoverbuttons.css',
23 |             'demo/css/style.css'
24 |         ], 'demo/css/core.css'
25 |     )
26 | 
27 | ;
28 | 


--------------------------------------------------------------------------------