<input type="checkbox"/>
<div class="pants"><div></div><div></div></div>

body{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:radial-gradient(circle at center, lighten(peru, 10%), darken(peru, 10%) 700px);
  &:before{
    font-family:'Futura', sans-serif;
    font-size:12px;
    color:rosybrown;
    content:'click me';
    position:absolute;
    width:100%;
    height:20px;
    bottom:20px;
    left:0;
    text-align:center;
    z-index:1000;
  }
  input{
    position:absolute;
    z-index:999;
    left:50%;
    top:50%;
    width:300px;
    height:125px;
    transform:translate(-50%, -50%) rotate(90deg);
    opacity:0;
    cursor:pointer;
    &:checked{
      ~ div{
        &:before{
          opacity:0;
        }
        &:after{
          box-shadow:0 0 0 10px #fff, 0 0 0 11px darken(peru, 20%);
        }
      }
      ~ div > div{
        &:first-of-type{
        transform:translateX(100px);
        }
        &:last-of-type{
          &:before, &:after{
            clip-path: polygon(54% 0, 64% 10%, 76% 0, 87% 7%, 100% 0, 100% 100%, 88% 89%, 79% 100%, 66% 90%, 55% 100%);

          }
        }
      }
    }
  }
  > div{
    width:300px;
    height:125px;
    border-radius:100px;
    position:relative;
    z-index:2;
    transform:rotate(90deg);
    &:before{
      content:'';
      position:absolute;
      width:100vh;
      height:100vw;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
      transition:0.3s ease-in-out;
      
  background:radial-gradient(circle at center, #fff, palegoldenrod 700px);
      z-index:-1;
    }
    &:after{
      content:'';
      transition:0.3s ease-in-out;
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      background:linear-gradient(to right, darken(mistyrose, 5%), mistyrose) 50px 30px / 120px 25px no-repeat, linear-gradient(to right, darken(mistyrose, 5%), mistyrose) 50px 70px / 120px 25px no-repeat, radial-gradient(ellipse at bottom right, steelblue 15px, transparent 15px) 230px -35px / 30px 90px no-repeat, radial-gradient(ellipse at top right, steelblue 15px, transparent 15px) 230px 70px / 30px 90px no-repeat,
      linear-gradient(to right, whitesmoke, silver) 255px 10px / 10px 45px no-repeat,
      linear-gradient(to right, whitesmoke, silver) 255px 70px / 10px 45px no-repeat, #fff;
      border-radius:200px;
      box-shadow:0 0 0 10px #fff, 0 0 0 11px darken(palegoldenrod, 20%);
    }
    > div{
      position:absolute;
      width:100px;
      height:100px;
      top:12.5px;
      left:12.5px;
      z-index:1;
      border-radius:100%;
      box-shadow:none;
      
      &:first-of-type{
        z-index:2;
        background:linear-gradient(to right, transparent 40%, saddlebrown 40%, saddlebrown 45%, transparent 45%), radial-gradient(ellipse at left, lightblue 40px, transparent 40px) 40px calc(50% - 15px) / 100% 200%, radial-gradient(ellipse at left, lightblue 40px, transparent 40px) 40px calc(50% + 15px) / 100% 200%;
        transform:translateX(10px);
        transition:0.3s ease-in-out;
      }
      &:last-of-type{
        background:linear-gradient(to right, crimson 40%, transparent 40%), linear-gradient(to bottom, transparent 40%, darken(mistyrose, 5%) 49%, darken(mistyrose, 10%) 49.5%, darken(mistyrose, 10%) 50.5%, darken(mistyrose, 5%) 51%, transparent 60%) 51px 50% / 25px 100% no-repeat, radial-gradient(ellipse at left, mistyrose 40px, transparent 40px) 40px calc(50% - 15px) / 100% 200%, radial-gradient(ellipse at left, mistyrose 40px, transparent 40px) 40px calc(50% + 15px) / 100% 200%;
        &:before, &:after{
          content:'';
          position:absolute;
          width:175px;
          height:35px;
          left:calc(100% - 35px);
          top:10px;
          background:linear-gradient(to right, darken(lightblue, 7.5%), lightblue);
          border-radius:0 10px 10px 0;
          clip-path: polygon(0 0, 24% 0, 53% 0, 78% 0, 100% 0, 100% 100%, 77% 100%, 54% 100%, 23% 100%, 0 100%);
          transition:0.3s ease-in-out;

        }
        &:after{
          top:auto;
          bottom:10px;
        }
      }
    }
  }
}