<div class="wrapper"><input type="checkbox" id="cbox1" value="first_checkbox"><div class="inner"></div><div class="icon"></div><p>Download<span>Downloading</span></div>

@mixin t($time){
  transition:$time ease-out;
}

$bg: #0130b4;
$w: #fff;
$f: 'Anonymous Pro', monospace;
$p: #ff5cf8;
$t: rgba(255,255,255,0);

body{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at center, $bg 10%, $t), repeating-linear-gradient(45deg, lighten($p, 10%), lighten($p, 10%) 1px, $p 2px, $p 10px);
  font-family:$f;
  font-weight:100;
  .wrapper{
    width:330px;
    height:100px;
    position:relative;
    overflow:hidden;
    margin-left:20px;
    .inner{
      position:absolute;
      width:270px;
      height:100%;
      background:$bg;
      z-index:-11;
      left:0;
      top:0;
      box-shadow:inset 0 0 0 3px $w;
      @include t(0.1s);
    }
    .icon{
      width:30px;
      height:30px;
      position:absolute;
      box-shadow:inset -5px 0 0 0 $w, inset 0 -5px 0 0 $w, inset 0 0 0 0 $w;
      top:50%;
      transform:translateY(-50%) rotate(45deg);
      left:35px;
      @include t(0.2s);
      &:before{
        content:'';
        position:absolute;
        width:40px;
        height:5px;
        background:$w;
        left:-12.5px;
        bottom:0px;
        transform-origin:100% 50%;
        transform:rotate(45deg);
      }
    }
    input{
      position:absolute;
      width:100%;
      height:100%;
      opacity:0;
      &:hover{
        ~.icon{
          transform:translateY(-50%) rotate(-45deg);
        }
      }
      &:checked{
        &~.inner{
          background:radial-gradient(circle at center, $p, $w), $w;
          background-position:150px 0px, 50%;
          background-size:300%, 100%;
          background-repeat:no-repeat;
          width:calc(100% - 20px);
        }
        &~.icon{
          border-radius:500%;
          left:35px;
          box-shadow:inset 0px 0 0 0 $w, inset 0 0px 0 0 $w, inset 0 0 0 2.5px $bg;
          animation:spinning 2s linear infinite;
          @keyframes spinning{
            0%{
              transform:translateY(-50%) rotate(0deg) scale(1.5);
            }
            100%{
              transform:translateY(-50%) rotate(360deg) scale(1.5);
            }
          }
        }
        &~p{
          color:transparent;
          transform:translateX(-50%) translateY(200%);
            span{
              color:$bg;
              opacity:1;
              font-weight:900;
              transform:translateY(-250%);
              animation:downloading 0.5s ease-in-out forwards;
              @keyframes downloading{
                0%{
                  transform:translateY(-500%);
                  font-weight:900;
                }
                70%{
                  transform:translateY(-240%);
                  font-weight:900;
                }
                80%{
                  transform:translateY(-255%);
                  font-weight:900;
                }
                95%{
                  transform:translateY(-250%);
                  font-weight:900;
                }
              }
            }
        }
      }
    }
    p{
      position:absolute;
      z-index:-1;
      left:50%;
      width:auto;
      height:auto;
      top:50%;
      line-height:1;
      transform:translateX(-50%) translateY(-50%);
      margin-top:0;
      margin-left:0px;
      color:$w;
      font-size:2em;
      @include t(0.2s);
      span{
        opacity:1;
        position:absolute;
        left:0;
        opacity:0;
        transform:translateY(-500%);
        @include t(0.3s);
      }
    }
  }
}