<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="btn">
 <i class="fa fa-paper-plane-o fa-2x send" aria-hidden="true"></i>
  <i class="fa fa-paper-plane-o fa-2x send2" aria-hidden="true"></i>
  <p>send</p></div>
*{
	margin: 0;
	padding: 0;
}

body{
	background: #00bfb6;
	font-family: arial;
}

/* Let's style the btn in such away that, 
it should always be at the center of the browser and style the btn */
.btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
  	border: 5px solid #f9c23c;
  	padding: 15px;
  	border-radius: 50px;
  	cursor: pointer;
  	overflow: hidden;
}

/* Style the p tag */
.btn p{
   text-transform: uppercase;
   text-align: center;
   color: #fff;
   font-weight: 900;
   font-size: 20px;
   margin-left: 30px;
   transition: all 0.5s ease;
}

/* Style the first icon with class send */
.send{
  position: absolute;
  top:15px;
  left: 30px;
  color: #fff;
  transition: all 0.5s ease;
}

/* Style the second icon with class send2 */
.send2{
  position: absolute;
  top:80px;
  left: 30px;
  color: #696666;
  transition: all 0.5s ease;
}


/* Hover effects */
.btn:hover{
  background: #f9c23c;
  transition: all 0.5s ease;
}

.btn:hover p{
  color: #696666;
  transition: all 0.5s ease;
  animation: move 1s linear 1s forwards;
}

.btn:hover .send{
  top: -50px;
  transition: all 0.5s ease;
}

.btn:hover .send2{
  top: 15px;
  transition: all 0.5s ease;
  animation: sending 1s linear 1s forwards;
}


/* CSS3 animation keyframes */
@keyframes sending{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translate(40px, -60px);
  }
}

@keyframes move{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-18px);
  }
}




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.