Icon on Hover.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="hoveranim.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<meta charset="utf-8">
<title>CSS ANIMATION</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
#btn{
width: 200px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffc107;
cursor: pointer;
border-radius: 5px;
overflow: hidden;
}
#btn:before{
color: white;
font-family: sans-serif;
content: 'Hover Me';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
transition: all 0.5s;
}
#btn:hover:before{
top: -30px;
}
#btn:after{
font-family: 'Ionicons';
content: '\f141';
font-size: 40px;
color: #f44336;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 140%;
transition: all 0.5s;
}
#btn:hover:after{
top: 50%;
}
</style>
</head>
<body>
<div id="btn">
</div>
</body>
</html>