p I think this is going to be interesting
input(id="nojs" type="checkbox")
label.btn(for="nojs") 
   .textNormal Send Message
   .textSent Sent!
   .icon
      i.material-icons send
   .lots
      - var n = 0;
      while n < 100
         i.material-icons send
         - n++

html, body{
   padding:0px;
   margin:0px;
   background:#222;
   font-family: 'Ubuntu', sans-serif;
   color:#FFF;
   text-align:center;
}
body{
   *{
      box-sizing:border-box;
      padding:0px;
   }
}
#nojs{
   display:none;
}
p{
   margin-bottom:10px;
}
.btn{
   position:relative;
   display:inline-block;
   background:#465;
   border:0px;
   border-radius:2px;
   margin:0px;
   color:#FFF;
   font-size:14px;
   height:60px;
   line-height:60px;
   width:200px;
   text-align:left;
   padding-left:30px;
   overflow:hidden;
   *{ display:inline-block; }
   .textNormal{
      transition: all 0.5s;
   }
   .textSent{
      opacity:0;
      position:absolute;
      width:100%;
      text-align:center;
      left:0px;
   }
   .icon{
      position:absolute;
      top:14px;
      right:15px;
      width:40px;
      height:40px;
      pointer-events:none;
   }
   .icon i{
      transform:rotateZ(-45deg) rotateX(25deg) rotateY(15deg);
      transform-origin:center;
      transition:all 0.25s;
      position:absolute;
      font-size:28px;
   }
   
   
}

#nojs{
   &:not(:checked){
      ~ .btn:hover{
             .icon i {
                transform:rotateZ(-55deg) rotateX(5deg) rotateY(15deg);
            }
      }
   }
   &:checked{
      ~ .btn{
         animation:colorOpacity 4s linear, clear 1s;
         animation-delay:0s, 4s;
         background:transparent;
         .textNormal{
            opacity: 0
         }
         .textSent{
            opacity:0;
            animation:showIn 1s, show 1s infinite;
            animation-delay: 2.75s, 2.75s;
         }
         .icon{
            animation:flyGrid 1s linear;
            transform:translateX(1000px);
         }
         .icon i{
            transform:rotateZ(-55deg) rotateX(5deg) rotateY(15deg);
            animation: flyRotate 1s linear;
         }
      }
   }
}
@keyframes flyGrid{
   0%{ transform:translate3d(0px, 0px, 0px);}  
   75%{ transform:translate3d(-130px, 0px, 0px);}  
   100%{ transform:translate3d(100px, 0px, 0px);}  
}
@keyframes flyRotate{
   0%{ transform:rotateZ(-55deg) rotateX(5deg) rotateY(15deg); }
   75%{ transform:rotateZ(-75deg) rotateX(0deg) rotateY(0deg); }
   100%{ transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg); }
}
@keyframes colorOpacity{
   0%{ background:#465; }
   40%{ background:#465; }
   50%{ background:#FFF;}
   100%{ background:#FFF; }
}
@keyframes clear{
   from{background:#FFF} to{background:transparent;}
}
@keyframes show{
   from, to{opacity:1; }
}
@keyframes showIn{
   to{opacity:0; }
   from{opacity:1; }
}
.lots{
   position:absolute;
   top:0px;
   left:-10px;
   i{
      position:absolute;
      @for $i from 1 through 100{
         &:nth-child(#{$i}n){
            left:random(500)-700px;
            top:random(100)-50 + px;
            font-size: $i+28 + px;
         }
      }
   }
}
#nojs:checked{
   ~ .btn .lots i{
      @for $i from 1 through 50{
         transform:translateX(920px);
         &:nth-child(#{$i}n){
            animation: lots random(3)+s ease;
            animation-delay:1s;
         }
      }
   }
}

@keyframes lots{
   from{ 
      transform: translateX(0px); 
   }
   to{ 
      transform:translateX(920px); 
   }
}

setTimeout(function(){
   document.querySelector('#nojs').checked = true;
}, 750)

setTimeout(function(){
   document.querySelector('#nojs').checked = false;
}, 3000)