<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);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.