HTMLify

toggle1.html
Views: 226 | Author: cody
<label>
  <input type="checkbox">
  <span class="custom__checkbox">
    <span class="custom__checkbox__face">
      <span class="face__eyes">
        <span class="face__eye"><span></span></span>
        <span class="face__eye"><span></span></span>
      </span>
      <span class="face__mouth"></span>
    </span>
    
    <svg xmlns="http://www.w3.org/2000/svg" class="bg" version="1.0" width="200" height="40" viewBox="0 0 1280.000000 640.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,640.000000) scale(0.100000,-0.100000)" fill="#3d8bd2" stroke="none">
<path d="M7750 6250 c0 -5 5 -10 11 -10 5 0 7 5 4 10 -3 6 -8 10 -11 10 -2 0 -4 -4 -4 -10z"/>
<path d="M2320 4966 c-24 -20 -25 -25 -22 -131 3 -136 3 -138 39 -124 15 6 24 6 18 1 -5 -5 -25 -14 -42 -20 -27 -9 -33 -8 -33 4 0 7 -4 14 -9 14 -5 0 -12 -99 -16 -219 -8 -242 -9 -245 -69 -216 -18 9 -55 17 -83 18 -42 2 -56 -2 -77 -22 -14 -14 -26 -19 -26 -12 0 7 -4 10 -9 7 -5 -3 -12 -90 -15 -193 -12 -341 -28 -668 -32 -673 -3 -2 -14 2 -25 9 -18 10 -24 10 -40 -5 -11 -9 -18 -24 -17 -32 2 -8 -3 -17 -9 -19 -8 -3 -13 4 -13 16 0 15 -10 23 -42 32 -23 6 -47 17 -53 24 -8 11 -19 12 -57 2 -26 -7 -50 -16 -54 -20 -13 -13 -44 -7 -44 8 0 8 1 16 3 18 5 8 -58 57 -73 57 -10 0 -24 10 -32 21 -14 22 -14 22 -46 -10 l-32 -33 0 47 c0 43 2 46 23 41 22 -6 22 -6 1 5 -20 10 -21 19 -23 147 -1 83 -6 139 -12 143 -6 3 -54 10 -107 13 -124 10 -153 25 -166 89 -7 33 -21 35 -31 5 -6 -22 -7 -22 -20 9 -11 24 -19 30 -34 26 -24 -6 -81 -56 -81 -71 0 -6 -9 -17 -20 -25 -13 -9 -24 -34 -30 -67 -13 -71 -20 -75 -20 -12 0 29 -4 52 -10 52 -6 0 -10 -35 -10 -84 0 -72 -3 -85 -20 -97 -15 -11 -20 -27 -21 -72 -2 -46 -6 -61 -23 -73 -18 -12 -19 -16 -6 -24 8 -5 12 -12 8 -15 -3 -4 -16 3 -27 14 -22 22 -41 27 -41 11 0 -5 -7 -7 -15 -4 -8 4 -15 2 -15 -4 0 -6 15 -14 32 -18 32 -7 32 -8 8 -14 l-25 -7 28 -12 c16 -6 34 -11 42 -11 7 0 15 -6 18 -14 7 -17 -57 -28 -72 -13 -15 15 -92 15 -120 1 -25 -14 -25 -14 -4 -20 13 -4 23 -16 26 -32 6 -34 5 -34 -27 -26 -19 4 -25 11 -21 21 4 12 -1 14 -27 9 -42 -7 -53 1 -54 42 -1 39 -8 47 -29 38 -15 -5 -15 -7 -1 -22 18 -18 21 -44 5 -44 -5 0 -8 -4 -5 -9 3 -5 -4 -11 -15 -14 -17 -5 -20 -11 -14 -36 6 -27 3 -31 -19 -37 -26 -6 -133 3 -150 13 -4 3 -2 9 5 14 19 11 7 19 -19 12 -15 -3 -22 -13 -22 -28 0 -18 -4 -22 -20 -18 -11 3 -26 0 -34 -6 -11 -9 -15 -6 -20 13 -4 15 -11 23 -19 20 -7 -2 -23 5 -35 17 -17 15 -26 18 -36 10 -10 -8 -17 -7 -26 4 -18 22 -47 18 -54 -7 -3 -13 -6 -737 -6 -1610 l0 -1588 6400 0 6400 0 0 2041 0 2041 -28 -7 c-75 -21 -128 -25 -387 -35 -373 -14 -573 -10 -589 12 -6 8 -20 17 -31 19 -16 3 -21 14 -23 47 -3 36 -7 43 -30 47 -63 13 -74 20 -87 58 -11 31 -10 39 1 45 12 6 11 11 -2 30 -8 12 -24 22 -35 22 -26 0 -24 27 3 36 l23 7 -23 8 c-25 10 -29 27 -7 35 8 4 15 10 15 15 0 5 -7 9 -15 9 -11 0 -15 13 -15 53 0 80 -16 90 -24 14 l-7 -64 -57 1 c-55 1 -57 0 -60 -26 -3 -22 1 -27 24 -30 39 -4 43 -28 5 -28 -44 0 -39 -18 6 -22 20 -2 38 -9 41 -17 3 -10 -4 -12 -32 -9 -25 3 -36 0 -36 -9 0 -7 11 -13 26 -13 16 0 24 -5 21 -12 -2 -7 -15 -13 -28 -13 -20 0 -24 -6 -27 -37 -2 -29 -8 -37 -28 -42 -14 -4 -24 -14 -24 -24 0 -9 -10 -22 -22 -27 -13 -6 -24 -20 -26 -32 -2 -17 -10 -23 -27 -23 -13 0 -30 -6 -38 -14 -8 -8 -31 -18 -51 -21 -46 -9 -58 -31 -45 -81 17 -58 8 -512 -10 -523 -10 -7 -11 -13 -2 -30 9 -15 9 -27 1 -41 -7 -14 -7 -20 0 -20 13 0 13 -51 1 -82 -5 -13 -12 -35 -15 -50 -4 -17 -13 -28 -24 -29 -14 0 -14 -2 3 -8 18 -7 16 -10 -17 -24 -34 -14 -42 -14 -73 -1 -34 14 -35 15 -35 74 0 59 -1 61 -30 67 -20 3 -30 12 -30 23 0 11 -11 21 -27 25 -23 6 -380 18 -448 15 -11 -1 -37 -2 -58 -3 -35 -1 -38 -3 -43 -39 -5 -29 -11 -38 -26 -38 -23 0 -38 -37 -38 -94 0 -23 -6 -50 -13 -60 -15 -21 -65 -25 -76 -7 -9 13 -95 -4 -121 -25 -26 -20 -62 -23 -90 -9 -15 8 -31 11 -35 7 -3 -4 -13 2 -21 12 -14 20 -14 20 -15 0 -1 -10 -5 4 -9 31 -5 28 -9 155 -9 284 l-1 235 -41 69 c-38 64 -41 75 -46 163 -3 52 -9 94 -13 94 -4 0 -12 -38 -19 -85 l-13 -84 -66 5 c-37 3 -72 7 -78 9 -7 2 -15 38 -19 84 -8 96 -25 117 -25 34 -1 -79 -21 -158 -57 -218 -28 -47 -30 -60 -39 -200 -5 -83 -8 -185 -7 -227 3 -72 1 -78 -17 -78 -11 0 -29 9 -41 21 -12 12 -29 19 -39 16 -10 -3 -21 1 -24 8 -2 7 -23 16 -45 20 -30 5 -41 12 -43 27 -5 34 -27 33 -34 -1 -5 -22 -12 -31 -26 -31 -11 0 -29 -11 -39 -24 -11 -14 -28 -27 -38 -31 -14 -4 -20 -20 -25 -76 -8 -87 -15 -100 -33 -65 -11 21 -21 26 -50 26 -20 0 -57 10 -81 22 -40 19 -50 20 -88 10 -24 -7 -75 -15 -114 -18 -53 -5 -71 -11 -75 -24 -6 -18 -60 -30 -141 -30 -24 0 -49 -6 -58 -15 -8 -8 -27 -20 -42 -25 -21 -8 -24 -14 -16 -22 12 -12 17 -58 6 -58 -3 0 -20 7 -37 14 -18 8 -45 16 -62 18 -25 3 -30 8 -36 38 -33 168 -38 175 -53 86 -4 -21 -12 -50 -18 -65 -6 -14 -12 -28 -13 -31 -10 -29 -22 -39 -55 -44 -21 -3 -41 -12 -43 -18 -3 -7 -6 21 -6 63 l-1 76 -67 21 c-38 12 -79 23 -93 24 -23 3 -25 8 -28 56 l-3 52 -62 2 c-67 2 -180 -2 -185 -7 -2 -2 -6 -25 -10 -52 l-7 -48 -43 -3 -42 -3 0 199 c0 110 -3 220 -6 246 l-7 46 -71 0 c-129 0 -206 11 -206 29 -1 14 -2 14 -14 -1 -10 -14 -89 -38 -122 -38 -2 0 -4 -58 -4 -130 l0 -130 -28 0 c-28 0 -63 -29 -75 -61 -3 -9 -22 -19 -45 -22 l-39 -7 -6 -107 c-4 -58 -9 -108 -11 -111 -11 -11 -91 -14 -124 -4 -20 5 -71 15 -112 21 -74 12 -93 22 -83 48 3 8 -2 22 -11 31 -12 15 -14 25 -6 53 12 42 13 39 -4 39 -9 0 -15 -20 -19 -65 -7 -76 -20 -105 -47 -105 -19 0 -20 7 -20 95 0 95 0 96 -27 106 -16 6 -63 11 -105 11 l-78 1 0 37 c0 33 -3 38 -29 43 -28 6 -30 10 -34 59 l-3 53 -2 -53 c-2 -50 -4 -53 -32 -58 -30 -6 -30 -8 -31 -73 -1 -36 -4 -118 -8 -181 -6 -109 -7 -115 -28 -118 l-23 -3 0 255 0 255 -37 3 c-38 3 -38 4 -44 54 -8 67 -13 74 -53 74 -69 0 -125 12 -129 29 -4 14 -5 14 -6 0 -1 -13 -18 -17 -88 -22 -47 -4 -90 -10 -95 -15 -5 -5 -14 -56 -19 -113 -20 -201 -26 -216 -28 -62 l-1 141 -60 7 c-33 4 -63 11 -66 16 -7 12 -207 12 -220 0 -5 -6 -34 -11 -64 -13 -48 -3 -55 -6 -58 -25 -2 -15 -13 -25 -28 -29 -13 -3 -25 -7 -26 -8 0 0 -4 -71 -8 -156 l-6 -155 -2 176 -2 177 -31 12 c-23 10 -74 11 -207 6 -96 -3 -178 -9 -181 -12 -5 -5 -18 -234 -20 -351 -1 -49 -3 -53 -26 -53 -13 0 -39 9 -56 19 -17 11 -37 17 -44 15 -14 -6 -25 25 -25 68 0 22 -6 29 -27 34 -87 19 -88 20 -94 50 -6 27 -7 27 -8 4 -1 -18 -4 -21 -10 -12 -7 11 -9 11 -14 -2 -8 -22 -172 -24 -184 -2 -4 7 -28 16 -53 20 -25 3 -62 9 -82 12 l-38 6 0 203 0 203 -71 7 c-65 7 -75 11 -128 55 -31 26 -69 62 -84 80 -15 17 -27 27 -27 21 0 -7 -11 -16 -25 -21 -23 -9 -25 -15 -25 -67 0 -47 -4 -61 -20 -71 -18 -11 -20 -23 -20 -135 l0 -124 -104 1 c-83 0 -108 -3 -123 -16 -10 -9 -30 -19 -45 -23 -22 -6 -27 -13 -30 -43 l-3 -37 -61 -5 c-56 -5 -82 -16 -109 -46 -5 -7 -22 -14 -37 -18 -26 -6 -28 -10 -28 -61 0 -53 0 -54 -32 -59 -18 -3 -51 -7 -73 -8 l-40 -3 -3 -56 c-3 -56 -3 -57 -27 -45 l-25 11 0 200 c0 184 -2 201 -18 210 -29 16 -73 36 -129 61 l-53 23 0 249 0 249 -62 9 -63 9 0 115 c0 63 4 163 8 222 7 95 6 107 -7 102 -17 -6 -33 36 -21 56 11 19 7 163 -6 171 -6 4 -9 11 -5 17 7 12 -46 31 -84 30 -14 0 -37 -10 -50 -22z m40 -26 c0 -5 -4 -10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m23 -80 c7 0 6 -4 -3 -10 -13 -9 -13 -11 0 -20 11 -7 8 -10 -17 -10 -36 0 -47 11 -38 39 7 23 38 33 43 14 2 -7 9 -13 15 -13z m-18 -60 c3 -5 -1 -10 -9 -10 -9 0 -16 5 -16 10 0 6 4 10 9 10 6 0 13 -4 16 -10z m-10 -38 c-3 -7 -5 -18 -5 -24 0 -18 -23 -2 -26 18 -2 14 2 20 17 20 12 0 18 -5 14 -14z m9143 -199 c2 -9 -7 -13 -27 -13 -34 0 -50 16 -24 23 27 7 46 3 51 -10z m34 -35 c-15 -15 -26 -4 -18 18 5 13 9 15 18 6 9 -9 9 -15 0 -24z m16 -33 c1 -1 -4 -7 -11 -14 -11 -8 -18 -6 -33 10 -18 20 -18 20 11 13 17 -4 31 -8 33 -9z m-14 -66 c-3 -5 -10 -7 -15 -3 -5 3 -7 10 -3 15 3 5 10 7 15 3 5 -3 7 -10 3 -15z m-56 -61 c-6 -18 -28 -21 -28 -4 0 9 7 16 16 16 9 0 14 -5 12 -12z m960 -244 c38 -8 25 -21 -30 -30 -52 -9 -53 -9 -58 -49 l-5 -40 -75 -5 -75 -5 -5 -168 c-4 -126 -8 -170 -19 -176 -18 -11 -359 -36 -369 -27 -9 10 -9 482 0 492 4 4 126 10 270 13 257 6 320 5 366 -5z m-11021 -686 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-680 -40 c-2 -7 -14 -12 -26 -11 -11 2 -21 -2 -21 -7 0 -6 -7 -10 -15 -10 -22 0 -18 15 8 28 31 15 60 15 54 0z m40 -40 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-37 8 c0 -3 -4 -8 -10 -11 -5 -3 -10 -1 -10 4 0 6 5 11 10 11 6 0 10 -2 10 -4z m-43 -12 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z m6924 -204 c-8 -22 -10 -18 -10 26 -1 28 2 54 7 58 11 12 14 -57 3 -84z m2529 86 c0 -2 -9 -6 -20 -9 -11 -3 -20 -1 -20 4 0 5 9 9 20 9 11 0 20 -2 20 -4z"/>
<path d="M2252 4895 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
<path d="M4326 3873 c-10 -61 -7 -203 4 -203 6 0 10 47 10 120 0 66 -2 120 -4 120 -2 0 -6 -17 -10 -37z"/>
<path d="M795 3570 c-3 -5 -1 -10 4 -10 6 0 11 5 11 10 0 6 -2 10 -4 10 -3 0 -8 -4 -11 -10z"/>
<path d="M500 3500 c-13 -8 -13 -10 2 -10 9 0 20 5 23 10 8 13 -5 13 -25 0z"/>
<path d="M535 3470 c-3 -5 -1 -10 4 -10 6 0 11 5 11 10 0 6 -2 10 -4 10 -3 0 -8 -4 -11 -10z"/>
<path d="M4543 3379 c4 -13 7 -30 7 -37 0 -7 4 -11 9 -8 11 7 2 54 -12 63 -6 4 -8 -2 -4 -18z"/>
</g>
</svg>
    
    <svg xmlns="http://www.w3.org/2000/svg" class="building" width="800" height="800" viewBox="0 0 800 800" fill="none">
<g clip-path="url(#clip0_1074_2)">
<rect x="225" width="350" height="800" rx="50" fill="white"/>
<rect y="125" width="200" height="675" rx="50" fill="white"/>
<rect x="600" y="250" width="200" height="550" rx="50" fill="white"/>
<path d="M225 125V800H337.5V662.5C337.5 655.588 343.088 650 350 650H450C456.912 650 462.5 655.588 462.5 662.5V800H575V250V50C575 22.3625 552.637 0 525 0H275C247.363 0 225 22.3625 225 50V125ZM425 112.5C425 105.588 430.588 100 437.5 100H487.5C494.412 100 500 105.588 500 112.5V162.5C500 169.412 494.412 175 487.5 175H437.5C430.588 175 425 169.412 425 162.5V112.5ZM425 237.5C425 230.588 430.588 225 437.5 225H487.5C494.412 225 500 230.588 500 237.5V287.5C500 294.412 494.412 300 487.5 300H437.5C430.588 300 425 294.412 425 287.5V237.5ZM425 362.5C425 355.588 430.588 350 437.5 350H487.5C494.412 350 500 355.588 500 362.5V412.5C500 419.412 494.412 425 487.5 425H437.5C430.588 425 425 419.412 425 412.5V362.5ZM425 487.5C425 480.588 430.588 475 437.5 475H487.5C494.412 475 500 480.588 500 487.5V537.5C500 544.412 494.412 550 487.5 550H437.5C430.588 550 425 544.412 425 537.5V487.5ZM300 112.5C300 105.588 305.588 100 312.5 100H362.5C369.412 100 375 105.588 375 112.5V162.5C375 169.412 369.412 175 362.5 175H312.5C305.588 175 300 169.412 300 162.5V112.5ZM300 237.5C300 230.588 305.588 225 312.5 225H362.5C369.412 225 375 230.588 375 237.5V287.5C375 294.412 369.412 300 362.5 300H312.5C305.588 300 300 294.412 300 287.5V237.5ZM300 362.5C300 355.588 305.588 350 312.5 350H362.5C369.412 350 375 355.588 375 362.5V412.5C375 419.412 369.412 425 362.5 425H312.5C305.588 425 300 419.412 300 412.5V362.5ZM300 487.5C300 480.588 305.588 475 312.5 475H362.5C369.412 475 375 480.588 375 487.5V537.5C375 544.412 369.412 550 362.5 550H312.5C305.588 550 300 544.412 300 537.5V487.5Z" fill="#231F20"/>
<path d="M350 375H325V400H350V375Z" fill="#231F20"/>
<path d="M350 500H325V525H350V500Z" fill="#231F20"/>
<path d="M437.5 675H362.5V800H437.5V675Z" fill="#231F20"/>
<path d="M125 625H100V650H125V625Z" fill="#231F20"/>
<path d="M350 125H325V150H350V125Z" fill="#231F20"/>
<path d="M350 250H325V275H350V250Z" fill="#231F20"/>
<path d="M475 250H450V275H475V250Z" fill="#231F20"/>
<path d="M475 125H450V150H475V125Z" fill="#231F20"/>
<path d="M475 375H450V400H475V375Z" fill="#231F20"/>
<path d="M475 500H450V525H475V500Z" fill="#231F20"/>
<path d="M126 500H101V525H126V500Z" fill="#231F20"/>
<path d="M200 125H50C22.3625 125 0 147.363 0 175V750C0 777.637 22.3625 800 50 800H200V125ZM150 662.5C150 669.412 144.412 675 137.5 675H87.5C80.5875 675 75 669.412 75 662.5V612.5C75 605.588 80.5875 600 87.5 600H137.5C144.412 600 150 605.588 150 612.5V662.5ZM150 537.5C150 544.412 144.412 550 137.5 550H87.5C80.5875 550 75 544.412 75 537.5V487.5C75 480.588 80.5875 475 87.5 475H137.5C144.412 475 150 480.588 150 487.5V537.5ZM150 412.5C150 419.412 144.412 425 137.5 425H87.5C80.5875 425 75 419.412 75 412.5V362.5C75 355.588 80.5875 350 87.5 350H137.5C144.412 350 150 355.588 150 362.5V412.5ZM137.5 300H87.5C80.5875 300 75 294.412 75 287.5V237.5C75 230.588 80.5875 225 87.5 225H137.5C144.412 225 150 230.588 150 237.5V287.5C150 294.412 144.412 300 137.5 300Z" fill="#231F20"/>
<path d="M700 625H675V650H700V625Z" fill="#231F20"/>
<path d="M700 500H675V525H700V500Z" fill="#231F20"/>
<path d="M700 375H675V400H700V375Z" fill="#231F20"/>
<path d="M750 250H600V800H750C777.637 800 800 777.637 800 750V300C800 272.363 777.637 250 750 250ZM725 662.5C725 669.412 719.412 675 712.5 675H662.5C655.588 675 650 669.412 650 662.5V612.5C650 605.588 655.588 600 662.5 600H712.5C719.412 600 725 605.588 725 612.5V662.5ZM725 537.5C725 544.412 719.412 550 712.5 550H662.5C655.588 550 650 544.412 650 537.5V487.5C650 480.588 655.588 475 662.5 475H712.5C719.412 475 725 480.588 725 487.5V537.5ZM725 412.5C725 419.412 719.412 425 712.5 425H662.5C655.588 425 650 419.412 650 412.5V362.5C650 355.588 655.588 350 662.5 350H712.5C719.412 350 725 355.588 725 362.5V412.5Z" fill="#231F20"/>
<path d="M125 375H100V400H125V375Z" fill="#231F20"/>
<path d="M125 250H100V275H125V250Z" fill="#231F20"/>
</g>
<defs>
<clipPath id="clip0_1074_2">
<rect width="800" height="800" fill="white"/>
</clipPath>
</defs>
</svg>
  </span>
</label>
<style>
body {
  display: flex;
  align-items:center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

input {
  display: none;
}

.custom__checkbox {
  display: flex;
  width: 200px;
  height: 66px;
  border-radius: 100px;
  background: #45a2f5;
  position: relative;
  overflow: hidden;
  padding: 4px;
  cursor: pointer;
  transition: .5s;
}

svg.bg {
  position: absolute;
  left: -29px;
  top: 2px;
  width: 232px;
  height: 84px;
}

.building {
  width: 40px;
  height: 80px;
  position: absolute;
  right: -2px;
  top: 13px;
  z-index: 3;
}

.custom__checkbox:before {
  content: "";
  width: 100%;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, #303241,#3c4456);
  z-index: 10;
}

.custom__checkbox__face {
  background: #ffe353;
  width: 58px;
  height: 58px;
  border-radius: 100%;
  transition: .5s;
  position: relative;
  z-index: 1;
}

.face__eyes {
  display: flex;
  justify-content: center;  
  transition: .3s;
  padding: 14px 6px 0;
  gap: 4px;
}

.face__eye {
  width: 14px;
  height: 14px;
  background: #fff;
  position: relative;
  border-radius: 100%;
}

.face__eye > span {
  position: absolute;
  z-index: 1;
  background: #fff;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  opacity: 0;
  transition: .3s;
}

.face__eye:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #000;
  right: 3px;
  top: 3px;
  position: absolute;  
  transition: .3s;
}

.face__eye:after {
  content: "";
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #000;
  right: 1px;
  top: -1px;
  position: absolute;
  transition: .3s;
}

.face__mouth {
  width: 9px;
  height: 8px;
  border-radius: 100%;
  border: 2px solid;
  display: block;
  margin: 0px auto;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  transition: .3s;
}

.custom__checkbox__face:hover .face__mouth {
  width: 6px;
  height: 3px;
  background: #000;
  margin-left: 35px;
  margin-top: 3px;
}

.custom__checkbox__face:hover .face__eyes {
  justify-content: end;
}

.custom__checkbox__face:hover .face__eye:before {
  right: 0;
}

.custom__checkbox__face:hover .face__eye:after {
  right: 0;
  transform: rotate(13deg);
}

.custom__checkbox__face:hover .face__eye:last-child:after {
  transform: rotate(-13deg);
}

input:checked + .custom__checkbox > .custom__checkbox__face {
   transform: translateX(135px);
}

input:checked + .custom__checkbox > .custom__checkbox__face .face__eyes {
   justify-content: start;
}

input:checked + .custom__checkbox > .custom__checkbox__face .face__eye:before {
  left: 1px;
}

input:checked + .custom__checkbox > .custom__checkbox__face .face__eye:after {
  transform: rotate(-7deg);
}

input:checked + .custom__checkbox > .custom__checkbox__face .face__eye:last-child:after {
  transform: rotate(7deg);
}

input:checked + .custom__checkbox > .custom__checkbox__face .face__mouth {
  transform: rotate(180deg);
  margin-left: 18px;
  margin-top: 1px;
}

input:checked + .custom__checkbox > .custom__checkbox__face:hover .face__mouth {
  width: 6px;
  height: 3px;
  background: #000;
  margin-left: 18px;
  margin-top: 1px;
  clip-path: none;
}

input:checked + .custom__checkbox > .custom__checkbox__face:hover .face__eyes {
    padding: 10px 6px 0;
}

input:checked + .custom__checkbox > .custom__checkbox__face:hover .face__eye:before {
    top: 2px;
}

input:checked + .custom__checkbox > .custom__checkbox__face:hover .face__eye > span {
    opacity: 1;
    top: 3px;
    left: 2px;
}
</style>

Comments