<button class="mail-btn" type="submit">send</button>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,400);
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,
body {
  width:100%;
  height:100%;
}
body {
  overflow-x:hidden;
  text-align:center;
  background:#2980b9;
  font-family: 'Open Sans', sans-serif;
}
.mail-btn {
  position:relative;
  top:35%;
  display:inline-block;
  padding:0.5rem 1rem;
  border:2px solid rgba(255,255,255,0.5);
  background:none;
  outline:none;
  -webkit-appearance: none;
  font-size:2rem;
  color:rgba(255,255,255,1);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.5rem;
  text-indent:0.5rem;
  cursor:pointer;
  transition:
    color 1.5s .5s,
    border 3s 1s;
  
}
.mail-btn:before,
.mail-btn:after {
  content:'';
  position:absolute;
  opacity:0;
  backface-visibility:visible;
  transform-style:preserve-3d;
  perspective:400px;
  transform-origin:50% -50%;
  transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
  transition:all 0.5s;
}
.mail-btn:before {
  top:5px;
  left:50%;
  height:3rem;
  background:white;
  border-top:2rem solid #2980b9;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.mail-btn:after {
  top:0;
  left:50%;
  border-top:2rem solid white;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.mail-btn:hover {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  transition:
    color .25s,
    border .25s;
}
.mail-btn:hover:before,
.mail-btn:hover:after {
  opacity:1;
  transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  animation:sended 4s 0.8s forwards;
}
@keyframes sended {
  0% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:0;
    transform:rotate(-45deg) translateX(300%) translateY(-500%);
  }
  5% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:1;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  78% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:1;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  79% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid white;
    border-left:10px solid white;
    opacity:0;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  80% {
    height:auto;
    width:auto;
    color:rgba(255,255,255,0);
    border:2px solid rgba(255,255,255,0);
    opacity:0;
    transform:rotate(0) translateX(0) translateY(0);
  }
  100% {
    height:auto;
    width:auto;
    color:rgba(255,255,255,1);
    border:2px solid rgba(255,255,255,0.5);
    opacity:1;
    transform:rotate(0) translateX(0) translateY(0);
  }
}
.fly:before,
.fly:after {animation:flyout .6s forwards;}
@keyframes flyout {
  0% {
    opacity:1;
    transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
  }
  33% {
    opacity:0.66;
    transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
  }
  100% {
    opacity:0;
    transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
  }
}
$(".mail-btn").on("click touchstart", function () {
    $(this).addClass("fly");
    that = this
    setTimeout(function() {
        $(that).removeClass("fly");
    }, 5400)
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js