CodePen - CSS Toggle Switch With Text

├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Toggle-Switches 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/42389395/184540165-86ff3f34-558a-4129-9785-56ab8b97f3a2.mov 6 | 7 | 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - CSS Toggle Switch With Text 6 | 7 | 8 | 9 | 10 | 11 | 207 | 208 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | user-select: none; 3 | -webkit-tap-highlight-color: transparent; 4 | } 5 | 6 | *:focus { 7 | outline: none; 8 | } 9 | 10 | body { 11 | font-family: Arial, Helvetica, sans-serif; 12 | margin: 0; 13 | background-color: #f1f9f9; 14 | } 15 | 16 | #app-cover { 17 | display: table; 18 | width: 600px; 19 | margin: 80px auto; 20 | counter-reset: button-counter; 21 | } 22 | 23 | .row { 24 | display: table-row; 25 | } 26 | 27 | .toggle-button-cover { 28 | display: table-cell; 29 | position: relative; 30 | width: 200px; 31 | height: 140px; 32 | box-sizing: border-box; 33 | } 34 | 35 | .button-cover { 36 | height: 100px; 37 | margin: 20px; 38 | background-color: #fff; 39 | box-shadow: 0 10px 20px -8px #c5d6d6; 40 | border-radius: 4px; 41 | } 42 | 43 | .button-cover:before { 44 | counter-increment: button-counter; 45 | content: counter(button-counter); 46 | position: absolute; 47 | right: 0; 48 | bottom: 0; 49 | color: #d7e3e3; 50 | font-size: 12px; 51 | line-height: 1; 52 | padding: 5px; 53 | } 54 | 55 | .button-cover, 56 | .knobs, 57 | .layer { 58 | position: absolute; 59 | top: 0; 60 | right: 0; 61 | bottom: 0; 62 | left: 0; 63 | } 64 | 65 | .button { 66 | position: relative; 67 | top: 50%; 68 | width: 74px; 69 | height: 36px; 70 | margin: -20px auto 0 auto; 71 | overflow: hidden; 72 | } 73 | 74 | .button.r, 75 | .button.r .layer { 76 | border-radius: 100px; 77 | } 78 | 79 | .button.b2 { 80 | border-radius: 2px; 81 | } 82 | 83 | .checkbox { 84 | position: relative; 85 | width: 100%; 86 | height: 100%; 87 | padding: 0; 88 | margin: 0; 89 | opacity: 0; 90 | cursor: pointer; 91 | z-index: 3; 92 | } 93 | 94 | .knobs { 95 | z-index: 2; 96 | } 97 | 98 | .layer { 99 | width: 100%; 100 | background-color: #ebf7fc; 101 | transition: 0.3s ease all; 102 | z-index: 1; 103 | } 104 | 105 | /* Button 1 */ 106 | #button-1 .knobs:before { 107 | content: "YES"; 108 | position: absolute; 109 | top: 4px; 110 | left: 4px; 111 | width: 20px; 112 | height: 10px; 113 | color: #fff; 114 | font-size: 10px; 115 | font-weight: bold; 116 | text-align: center; 117 | line-height: 1; 118 | padding: 9px 4px; 119 | background-color: #03a9f4; 120 | border-radius: 50%; 121 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; 122 | } 123 | 124 | #button-1 .checkbox:checked + .knobs:before { 125 | content: "NO"; 126 | left: 42px; 127 | background-color: #f44336; 128 | } 129 | 130 | #button-1 .checkbox:checked ~ .layer { 131 | background-color: #fcebeb; 132 | } 133 | 134 | #button-1 .knobs, 135 | #button-1 .knobs:before, 136 | #button-1 .layer { 137 | transition: 0.3s ease all; 138 | } 139 | 140 | /* Button 2 */ 141 | #button-2 .knobs:before, 142 | #button-2 .knobs:after { 143 | content: "YES"; 144 | position: absolute; 145 | top: 4px; 146 | left: 4px; 147 | width: 20px; 148 | height: 10px; 149 | color: #fff; 150 | font-size: 10px; 151 | font-weight: bold; 152 | text-align: center; 153 | line-height: 1; 154 | padding: 9px 4px; 155 | background-color: #03a9f4; 156 | border-radius: 50%; 157 | transition: 0.3s ease all; 158 | } 159 | 160 | #button-2 .knobs:before { 161 | content: "YES"; 162 | } 163 | 164 | #button-2 .knobs:after { 165 | content: "NO"; 166 | } 167 | 168 | #button-2 .knobs:after { 169 | right: -28px; 170 | left: auto; 171 | background-color: #f44336; 172 | } 173 | 174 | #button-2 .checkbox:checked + .knobs:before { 175 | left: -28px; 176 | } 177 | 178 | #button-2 .checkbox:checked + .knobs:after { 179 | right: 4px; 180 | } 181 | 182 | #button-2 .checkbox:checked ~ .layer { 183 | background-color: #fcebeb; 184 | } 185 | 186 | /* Button 3 */ 187 | #button-3 .knobs:before { 188 | content: "YES"; 189 | position: absolute; 190 | top: 4px; 191 | left: 4px; 192 | width: 20px; 193 | height: 10px; 194 | color: #fff; 195 | font-size: 10px; 196 | font-weight: bold; 197 | text-align: center; 198 | line-height: 1; 199 | padding: 9px 4px; 200 | background-color: #03a9f4; 201 | border-radius: 50%; 202 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); 203 | } 204 | 205 | #button-3 .checkbox:active + .knobs:before { 206 | width: 46px; 207 | border-radius: 100px; 208 | } 209 | 210 | #button-3 .checkbox:checked:active + .knobs:before { 211 | margin-left: -26px; 212 | } 213 | 214 | #button-3 .checkbox:checked + .knobs:before { 215 | content: "NO"; 216 | left: 42px; 217 | background-color: #f44336; 218 | } 219 | 220 | #button-3 .checkbox:checked ~ .layer { 221 | background-color: #fcebeb; 222 | } 223 | 224 | /* Button 4 */ 225 | #button-4 .knobs:before, 226 | #button-4 .knobs:after { 227 | position: absolute; 228 | top: 4px; 229 | left: 4px; 230 | width: 20px; 231 | height: 10px; 232 | color: #fff; 233 | font-size: 10px; 234 | font-weight: bold; 235 | text-align: center; 236 | line-height: 1; 237 | padding: 9px 4px; 238 | background-color: #03a9f4; 239 | border-radius: 50%; 240 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; 241 | } 242 | 243 | #button-4 .knobs:before { 244 | content: "YES"; 245 | } 246 | 247 | #button-4 .knobs:after { 248 | content: "NO"; 249 | } 250 | 251 | #button-4 .knobs:after { 252 | top: -28px; 253 | right: 4px; 254 | left: auto; 255 | background-color: #f44336; 256 | } 257 | 258 | #button-4 .checkbox:checked + .knobs:before { 259 | top: -28px; 260 | } 261 | 262 | #button-4 .checkbox:checked + .knobs:after { 263 | top: 4px; 264 | } 265 | 266 | #button-4 .checkbox:checked ~ .layer { 267 | background-color: #fcebeb; 268 | } 269 | 270 | /* Button 5 */ 271 | #button-5 { 272 | perspective: 60px; 273 | overflow: visible; 274 | } 275 | 276 | #button-5 .knobs:before, 277 | #button-5 .knobs span { 278 | content: ""; 279 | position: absolute; 280 | top: 4px; 281 | left: 4px; 282 | width: 20px; 283 | height: 10px; 284 | color: #fff; 285 | font-size: 10px; 286 | font-weight: bold; 287 | text-align: center; 288 | line-height: 1; 289 | padding: 9px 4px; 290 | border-radius: 50%; 291 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; 292 | } 293 | 294 | #button-5 .knobs:before { 295 | background-color: #03a9f4; 296 | } 297 | 298 | #button-5 .knobs span:before { 299 | content: "YES"; 300 | } 301 | 302 | #button-5 .knobs:before, 303 | #button-5 .layer { 304 | transform: rotateY(0); 305 | transform-origin: center; 306 | } 307 | 308 | #button-5 .checkbox:checked + .knobs:before, 309 | #button-5 .checkbox:checked + .knobs span { 310 | left: 42px; 311 | } 312 | 313 | #button-5 .checkbox:checked + .knobs:before { 314 | transform: rotateY(180deg); 315 | background-color: #f44336; 316 | } 317 | 318 | #button-5 .checkbox:checked + .knobs span:before { 319 | content: "NO"; 320 | left: 42px; 321 | } 322 | 323 | #button-5 .checkbox:checked ~ .layer { 324 | background-color: #fcebeb; 325 | transform: rotateY(-180deg); 326 | } 327 | 328 | #button-5 .knobs, 329 | #button-5 .knobs:before, 330 | #button-5 .layer { 331 | transition: 0.3s ease all; 332 | } 333 | 334 | /* Button 6 */ 335 | #button-6 { 336 | overflow: visible; 337 | } 338 | 339 | #button-6 .knobs:before { 340 | content: "YES"; 341 | position: absolute; 342 | top: 4px; 343 | left: 4px; 344 | width: 20px; 345 | height: 10px; 346 | color: #fff; 347 | font-size: 10px; 348 | font-weight: bold; 349 | text-align: center; 350 | line-height: 1; 351 | padding: 9px 4px; 352 | background-color: #03a9f4; 353 | border-radius: 50%; 354 | } 355 | 356 | #button-6 .layer, 357 | #button-6 .knobs, 358 | #button-6 .knobs:before { 359 | transform: rotateZ(0); 360 | transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; 361 | } 362 | 363 | #button-6 .checkbox:checked + .knobs { 364 | transform: rotateZ(-180deg); 365 | } 366 | 367 | #button-6 .checkbox:checked + .knobs:before { 368 | content: "NO"; 369 | background-color: #f44336; 370 | transform: rotateZ(180deg); 371 | } 372 | 373 | #button-6 .checkbox:checked ~ .layer { 374 | background-color: #fcebeb; 375 | transform: rotateZ(180deg); 376 | } 377 | 378 | /* Button 7 */ 379 | #button-7 .knobs:before, 380 | #button-7 .knobs:after, 381 | #button-7 .knobs span { 382 | position: absolute; 383 | top: 4px; 384 | width: 20px; 385 | height: 10px; 386 | font-size: 10px; 387 | font-weight: bold; 388 | text-align: center; 389 | line-height: 1; 390 | padding: 9px 4px; 391 | border-radius: 50%; 392 | } 393 | 394 | #button-7 .knobs:before { 395 | content: "YES"; 396 | left: 4px; 397 | color: #fff; 398 | opacity: 1; 399 | } 400 | 401 | #button-7 .knobs:after { 402 | content: "N"; 403 | left: 42px; 404 | color: #fff; 405 | width: 14px; 406 | text-align: left; 407 | padding: 9px 7px; 408 | background-color: #f44336; 409 | opacity: 0; 410 | } 411 | 412 | #button-7 .knobs:before, 413 | #button-7 .knobs:after { 414 | transition: 0.3s ease all; 415 | z-index: 2; 416 | } 417 | 418 | #button-7 .knobs span { 419 | left: 4px; 420 | background-color: #03a9f4; 421 | transition: 0.2s ease all; 422 | z-index: 1; 423 | } 424 | 425 | #button-7 .checkbox:checked + .knobs:before { 426 | opacity: 0; 427 | } 428 | 429 | #button-7 .checkbox:checked + .knobs:after { 430 | opacity: 1; 431 | } 432 | 433 | #button-7 .checkbox:checked + .knobs span { 434 | top: 14px; 435 | left: 56px; 436 | width: 2px; 437 | height: 2px; 438 | padding: 3px; 439 | background-color: #fff; 440 | z-index: 3; 441 | } 442 | 443 | #button-7 .checkbox:checked ~ .layer { 444 | background-color: #fcebeb; 445 | } 446 | 447 | /* Button 8 */ 448 | #button-8 .knobs:before, 449 | #button-8 .knobs:after, 450 | #button-8 .knobs span { 451 | position: absolute; 452 | top: 4px; 453 | width: 20px; 454 | height: 10px; 455 | font-size: 10px; 456 | font-weight: bold; 457 | text-align: center; 458 | line-height: 1; 459 | padding: 9px 4px; 460 | border-radius: 50%; 461 | transition: 0.3s ease all; 462 | } 463 | 464 | #button-8 .knobs:before { 465 | content: "YES"; 466 | color: #fff; 467 | left: 4px; 468 | } 469 | 470 | #button-8 .knobs:after { 471 | content: "NO"; 472 | left: 42px; 473 | color: #fff; 474 | background-color: #f44336; 475 | opacity: 0; 476 | } 477 | 478 | #button-8 .knobs:before, 479 | #button-8 .knobs:after { 480 | z-index: 2; 481 | } 482 | 483 | #button-8 .knobs span { 484 | left: 4px; 485 | background-color: #03a9f4; 486 | z-index: 1; 487 | } 488 | 489 | #button-8 .checkbox:checked + .knobs:before { 490 | opacity: 0; 491 | } 492 | 493 | #button-8 .checkbox:checked + .knobs:after { 494 | opacity: 1; 495 | } 496 | 497 | #button-8 .checkbox:checked + .knobs span { 498 | background-color: #fcebeb; 499 | transform: scale(4); 500 | } 501 | 502 | /* Button 9 */ 503 | #button-9 .knobs:before, 504 | #button-9 .knobs:after, 505 | #button-9 .knobs span { 506 | position: absolute; 507 | top: 4px; 508 | width: 20px; 509 | height: 10px; 510 | font-size: 10px; 511 | font-weight: bold; 512 | text-align: center; 513 | line-height: 1; 514 | padding: 9px 4px; 515 | border-radius: 50%; 516 | transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; 517 | } 518 | 519 | #button-9 .knobs:before { 520 | content: "YES"; 521 | left: 4px; 522 | } 523 | 524 | #button-9 .knobs:after { 525 | content: "NO"; 526 | right: -24px; 527 | } 528 | 529 | #button-9 .knobs:before, 530 | #button-9 .knobs:after { 531 | color: #fff; 532 | z-index: 2; 533 | } 534 | 535 | #button-9 .knobs span { 536 | left: 4px; 537 | background-color: #03a9f4; 538 | z-index: 1; 539 | } 540 | 541 | #button-9 .checkbox:checked + .knobs:before { 542 | left: -24px; 543 | } 544 | 545 | #button-9 .checkbox:checked + .knobs:after { 546 | right: 4px; 547 | } 548 | 549 | #button-9 .checkbox:checked + .knobs span { 550 | left: 42px; 551 | background-color: #f44336; 552 | } 553 | 554 | #button-9 .checkbox:checked ~ .layer { 555 | background-color: #fcebeb; 556 | } 557 | 558 | /* Button 10 */ 559 | #button-10 .knobs:before, 560 | #button-10 .knobs:after, 561 | #button-10 .knobs span { 562 | position: absolute; 563 | top: 4px; 564 | width: 20px; 565 | height: 10px; 566 | font-size: 10px; 567 | font-weight: bold; 568 | text-align: center; 569 | line-height: 1; 570 | padding: 9px 4px; 571 | border-radius: 2px; 572 | transition: 0.3s ease all; 573 | } 574 | 575 | #button-10 .knobs:before { 576 | content: ""; 577 | left: 4px; 578 | background-color: #03a9f4; 579 | } 580 | 581 | #button-10 .knobs:after { 582 | content: "NO"; 583 | right: 4px; 584 | color: #4e4e4e; 585 | } 586 | 587 | #button-10 .knobs span { 588 | display: inline-block; 589 | left: 4px; 590 | color: #fff; 591 | z-index: 1; 592 | } 593 | 594 | #button-10 .checkbox:checked + .knobs span { 595 | color: #4e4e4e; 596 | } 597 | 598 | #button-10 .checkbox:checked + .knobs:before { 599 | left: 42px; 600 | background-color: #f44336; 601 | } 602 | 603 | #button-10 .checkbox:checked + .knobs:after { 604 | color: #fff; 605 | } 606 | 607 | #button-10 .checkbox:checked ~ .layer { 608 | background-color: #fcebeb; 609 | } 610 | 611 | /* Button 11 */ 612 | #button-11 { 613 | overflow: visible; 614 | } 615 | 616 | #button-11 .knobs { 617 | perspective: 70px; 618 | } 619 | 620 | #button-11 .knobs:before, 621 | #button-11 .knobs:after, 622 | #button-11 .knobs span { 623 | position: absolute; 624 | top: 4px; 625 | border-radius: 2px; 626 | } 627 | 628 | #button-11 .knobs:before, 629 | #button-11 .knobs:after { 630 | width: 20px; 631 | height: 10px; 632 | color: #4e4e4e; 633 | font-size: 10px; 634 | font-weight: bold; 635 | text-align: center; 636 | line-height: 1; 637 | padding: 9px 4px; 638 | } 639 | 640 | #button-11 .knobs:before { 641 | content: "YES"; 642 | left: 4px; 643 | } 644 | 645 | #button-11 .knobs:after { 646 | content: "NO"; 647 | right: 4px; 648 | } 649 | 650 | #button-11 .knobs span { 651 | right: 4px; 652 | width: 33px; 653 | height: 28px; 654 | background-color: #03a9f4; 655 | transform: rotateY(0); 656 | transform-origin: 0% 50%; 657 | transition: 0.6s ease all; 658 | z-index: 1; 659 | } 660 | 661 | #button-11 .checkbox:checked + .knobs span { 662 | transform: rotateY(-180deg); 663 | background-color: #f44336; 664 | } 665 | 666 | #button-11 .checkbox:checked ~ .layer { 667 | background-color: #fcebeb; 668 | } 669 | 670 | /* Button 12 */ 671 | #button-12 .knobs:before, 672 | #button-12 .knobs:after, 673 | #button-12 .knobs span, 674 | #button-12 .knobs span:before, 675 | #button-12 .knobs span:after { 676 | position: absolute; 677 | top: 4px; 678 | font-size: 10px; 679 | font-weight: bold; 680 | text-align: center; 681 | line-height: 1; 682 | border-radius: 2px; 683 | transition: 0.3s ease all; 684 | } 685 | 686 | #button-12 .knobs:before { 687 | content: "YES"; 688 | left: 4px; 689 | } 690 | 691 | #button-12 .knobs:after { 692 | content: "NO"; 693 | right: 4px; 694 | } 695 | 696 | #button-12 .knobs:before, 697 | #button-12 .knobs:after { 698 | width: 27px; 699 | height: 10px; 700 | color: #4e4e4e; 701 | padding: 9px 3px; 702 | z-index: 1; 703 | } 704 | 705 | #button-12 .knobs span { 706 | display: inline-block; 707 | z-index: 2; 708 | } 709 | 710 | #button-12 .knobs span, 711 | #button-12 .knobs span:before, 712 | #button-12 .knobs span:after { 713 | width: 20px; 714 | height: 10px; 715 | padding: 9px 4px; 716 | } 717 | 718 | #button-12 .knobs span:before, 719 | #button-12 .knobs span:after { 720 | content: ""; 721 | top: 0; 722 | } 723 | 724 | #button-12 .knobs span:before { 725 | left: -28px; 726 | background-color: #f44336; 727 | } 728 | 729 | #button-12 .knobs span:after { 730 | right: -42px; 731 | background-color: #03a9f4; 732 | } 733 | 734 | #button-12 .checkbox:checked + .knobs span:before { 735 | left: 4px; 736 | } 737 | 738 | #button-12 .checkbox:checked + .knobs span:after { 739 | right: -74px; 740 | } 741 | 742 | #button-12 .checkbox:checked ~ .layer { 743 | background-color: #fcebeb; 744 | } 745 | 746 | /* Button 13 */ 747 | #button-13 .knobs:before, 748 | #button-13 .knobs:after, 749 | #button-13 .knobs span { 750 | position: absolute; 751 | top: 4px; 752 | width: 20px; 753 | height: 10px; 754 | font-size: 10px; 755 | font-weight: bold; 756 | text-align: center; 757 | line-height: 1; 758 | padding: 9px 4px; 759 | border-radius: 2px; 760 | transition: 0.3s ease all; 761 | } 762 | 763 | #button-13 .knobs:before, 764 | #button-13 .knobs:after { 765 | color: #4e4e4e; 766 | z-index: 1; 767 | } 768 | 769 | #button-13 .knobs:before { 770 | content: "YES"; 771 | left: 4px; 772 | } 773 | 774 | #button-13 .knobs:after { 775 | content: "NO"; 776 | right: 4px; 777 | } 778 | 779 | #button-13 .knobs span { 780 | width: 25px; 781 | left: 37px; 782 | background-color: #03a9f4; 783 | z-index: 2; 784 | } 785 | 786 | #button-13 .checkbox:checked + .knobs span { 787 | left: 4px; 788 | background-color: #f44336; 789 | } 790 | 791 | #button-13 .checkbox:checked ~ .layer { 792 | background-color: #fcebeb; 793 | } 794 | 795 | /* Button 14 */ 796 | #button-14 .knobs:before, 797 | #button-14 .knobs:after, 798 | #button-14 .knobs span:before, 799 | #button-14 .knobs span:after { 800 | position: absolute; 801 | top: 4px; 802 | width: 20px; 803 | height: 10px; 804 | font-size: 10px; 805 | font-weight: bold; 806 | text-align: center; 807 | line-height: 1; 808 | padding: 9px 4px; 809 | border-radius: 2px; 810 | transition: 0.3s ease all; 811 | } 812 | 813 | #button-14 .knobs:before, 814 | #button-14 .knobs:after { 815 | color: #4e4e4e; 816 | z-index: 1; 817 | } 818 | 819 | #button-14 .knobs:before { 820 | content: "YES"; 821 | left: 4px; 822 | } 823 | 824 | #button-14 .knobs:after { 825 | content: "NO"; 826 | right: 4px; 827 | } 828 | 829 | #button-14 .knobs span { 830 | top: 0; 831 | left: 0; 832 | display: block; 833 | width: 100%; 834 | height: 100%; 835 | } 836 | 837 | #button-14 .knobs span:before { 838 | left: 4px; 839 | top: -28px; 840 | background-color: #f44336; 841 | } 842 | 843 | #button-14 .knobs span:after { 844 | top: 4px; 845 | left: 39px; 846 | background-color: #03a9f4; 847 | } 848 | 849 | #button-14 .knobs span:before, 850 | #button-14 .knobs span:after { 851 | content: ""; 852 | width: 23px; 853 | z-index: 2; 854 | } 855 | 856 | #button-14 .checkbox:checked + .knobs span:before { 857 | top: 4px; 858 | } 859 | 860 | #button-14 .checkbox:checked + .knobs span:after { 861 | top: -28px; 862 | } 863 | 864 | #button-14 .checkbox:checked ~ .layer { 865 | background-color: #fcebeb; 866 | } 867 | 868 | /* Button 15 */ 869 | #button-15 .knobs:before, 870 | #button-15 .knobs:after { 871 | position: absolute; 872 | top: 4px; 873 | width: 20px; 874 | height: 10px; 875 | color: #fff; 876 | font-size: 10px; 877 | font-weight: bold; 878 | text-align: center; 879 | line-height: 1; 880 | padding: 9px 4px; 881 | opacity: 1; 882 | border-radius: 2px; 883 | transform: scale(1); 884 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; 885 | } 886 | 887 | #button-15 .knobs:before { 888 | content: "YES"; 889 | left: 4px; 890 | background-color: #03a9f4; 891 | } 892 | 893 | #button-15 .knobs:after { 894 | content: "NO"; 895 | right: 4px; 896 | opacity: 0; 897 | transform: scale(4); 898 | background-color: #f44336; 899 | } 900 | 901 | #button-15 .checkbox:checked + .knobs:before { 902 | opacity: 0; 903 | transform: scale(4); 904 | } 905 | 906 | #button-15 .checkbox:checked + .knobs:after { 907 | opacity: 1; 908 | transform: scale(1); 909 | } 910 | 911 | #button-15 .checkbox:checked ~ .layer { 912 | background-color: #fcebeb; 913 | } 914 | 915 | /* Button 16 */ 916 | #button-16 .knobs:before { 917 | content: "YES"; 918 | position: absolute; 919 | top: 4px; 920 | left: 4px; 921 | width: 20px; 922 | height: 10px; 923 | color: #fff; 924 | font-size: 10px; 925 | font-weight: bold; 926 | text-align: center; 927 | line-height: 1; 928 | padding: 9px 4px; 929 | background-color: #03a9f4; 930 | border-radius: 2px; 931 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); 932 | } 933 | 934 | #button-16 .checkbox:active + .knobs:before { 935 | width: 46px; 936 | } 937 | 938 | #button-16 .checkbox:checked:active + .knobs:before { 939 | margin-left: -26px; 940 | } 941 | 942 | #button-16 .checkbox:checked + .knobs:before { 943 | content: "NO"; 944 | left: 42px; 945 | background-color: #f44336; 946 | } 947 | 948 | #button-16 .checkbox:checked ~ .layer { 949 | background-color: #fcebeb; 950 | } 951 | 952 | /* Button 17 */ 953 | #button-17 .knobs:before, 954 | #button-17 .knobs span { 955 | content: "YES"; 956 | position: absolute; 957 | top: 4px; 958 | left: 4px; 959 | width: 20px; 960 | height: 10px; 961 | color: #fff; 962 | font-size: 10px; 963 | font-weight: bold; 964 | text-align: center; 965 | line-height: 1; 966 | padding: 9px 4px; 967 | } 968 | 969 | #button-17 .knobs:before { 970 | transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15); 971 | z-index: 2; 972 | } 973 | 974 | #button-17 .knobs span { 975 | background-color: #03a9f4; 976 | border-radius: 2px; 977 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); 978 | z-index: 1; 979 | } 980 | 981 | #button-17 .checkbox:checked + .knobs:before { 982 | content: "NO"; 983 | left: 42px; 984 | } 985 | 986 | #button-17 .checkbox:checked + .knobs span { 987 | left: 42px; 988 | background-color: #f44336; 989 | } 990 | 991 | #button-17 .checkbox:checked ~ .layer { 992 | background-color: #fcebeb; 993 | } 994 | 995 | /* Button 18 */ 996 | #button-18 .knobs:before, 997 | #button-18 .knobs span { 998 | content: "YES"; 999 | position: absolute; 1000 | top: 4px; 1001 | left: 4px; 1002 | color: #fff; 1003 | font-size: 10px; 1004 | font-weight: bold; 1005 | text-align: center; 1006 | line-height: 1; 1007 | background-color: #03a9f4; 1008 | border-radius: 2px; 1009 | } 1010 | 1011 | #button-18 .knobs:before { 1012 | top: 50%; 1013 | left: 8px; 1014 | width: 20px; 1015 | height: 10px; 1016 | margin-top: -5px; 1017 | background-color: transparent; 1018 | z-index: 2; 1019 | } 1020 | 1021 | #button-18 .knobs span { 1022 | width: 20px; 1023 | height: 10px; 1024 | padding: 9px 4px; 1025 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15); 1026 | z-index: 1; 1027 | } 1028 | 1029 | #button-18 .checkbox:active + .knobs:before { 1030 | left: 10px; 1031 | width: 46px; 1032 | height: 4px; 1033 | color: transparent; 1034 | margin-top: -2px; 1035 | background-color: #0095d8; 1036 | transition: 0.3s ease all; 1037 | overflow: hidden; 1038 | } 1039 | 1040 | #button-18 .checkbox:active + .knobs span { 1041 | width: 58px; 1042 | } 1043 | 1044 | #button-18 .checkbox:checked:active + .knobs:before { 1045 | left: auto; 1046 | right: 10px; 1047 | background-color: #d80000; 1048 | } 1049 | 1050 | #button-18 .checkbox:checked:active + .knobs span { 1051 | margin-left: -38px; 1052 | } 1053 | 1054 | #button-18 .checkbox:checked + .knobs:before { 1055 | content: "NO"; 1056 | left: 47px; 1057 | } 1058 | 1059 | #button-18 .checkbox:checked + .knobs span { 1060 | left: 42px; 1061 | background-color: #f44336; 1062 | } 1063 | 1064 | #button-18 .checkbox:checked ~ .layer { 1065 | background-color: #fcebeb; 1066 | } 1067 | --------------------------------------------------------------------------------