<div class="wrap">
<input type="checkbox" />
<div class="outer">
</div>
<div class="inner">
</div>
</div>

<div class="wrap">
<input type="checkbox" />
<div class="outer">
</div>
<div class="inner">
</div>
</div>

body{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
  .wrap{
    width:250px;
    height:100px;
    position:absolute;
    left:calc(50% - 125px);
    top:calc(50% - 50px);
    &:first-of-type{
      margin-top:-50px;
      .inner{
        transition:0.4s ease-in-out;
        transition-delay:0s;
      }
      .outer{
        transition:transform 0.4s ease-in-out;
        transition-delay:0.4s;
        &:before{
          content:'';
          position:absolute;
          width:100%;
          height:100%;
          left:0;
          top:0;
          border-radius:80px;
          background: linear-gradient(to right, #03001e, #7303c0, #ec38bc);
        }
      }
      input{
        &:checked{
          &~ .outer{
            animation:shift 0.8s ease-in-out 1 forwards;
            transform:rotate(180deg);
            &:before{
              background: linear-gradient(to left, #03001e, #7303c0, #ec38bc);
            }
            @keyframes shift{
              0%{
                width:250px;
                transform:rotate(0deg);
              }
              25%{
                width:100px;
                transform:rotate(0deg);
              }
              50%{
                width:100px;
                transform:rotate(180deg);
              }
              100%{
                width:250px;
                transform:translateX(150px) rotate(180deg);
              }
            }
            &~ .inner{
              transition-delay:0.4s;
              transform:translateX(150px);
              box-shadow:inset 5px -10px 15px 0 rgba(0,0,0,0.5);
            }
          }
        }
      }
    }
    &:nth-of-type(2){
      margin-top:75px;
        input{
      &:checked{
        z-index:7;
        &~ .outer{
          transform:rotate(180deg);
          margin-left:150px;
        }
        &~ .inner{
          margin-left:150px;
          box-shadow:inset 5px -10px 15px 0 rgba(0,0,0,0.5);
        }
      }
    }
    }
  }

  .outer, input{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:9;
    border-radius:80px;
    opacity:0;
    &:nth-of-type(2){
      z-index:8;
    }
  }
  .outer{
    background: linear-gradient(to right, #03001e, #7303c0, #ec38bc);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 20px 0 rgba(0,0,0,0.15);
    opacity:1;
    z-index:0;
    transform-origin:50px 50px;
    transition:transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    transition-delay:0s, 0.3s;

  }
  .inner{
      position:absolute;
      width:80px;
      height:80px;
      background:#fff;
      box-shadow:inset -5px -10px 15px 0 rgba(0,0,0,0.5);
      background-position:-35px -30px;
      background-size:120%;
      position:absolute;
      left:calc(50% - 115px);
      top:calc(50% - 40px);
      border-radius:500%;
      transition:margin 0.3s ease-in-out, box-shadow 0.6s ease-in-out;
      transition-delay:0.3s, 0s;
    }
  
}