JSFiddle - React, Tailwind, and code Playground

by shuja uddin

HTML

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<div class="btn">




</div>

CSS

body{
  background:#eee;
}
.btn{
  width:160px;
  height:50px;
  background:tomato;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition:all 0.3s;
  overflow:hidden;
}
.btn:hover{
  cursor:pointer;
}
.btn:before{
  content:'hover me';
  position:absolute;
  top:50%;
  left:50%;
  color:#fff;
  transform:translate(-50%,-50%);
  transition:all 0.5s;
}
.btn:hover:before{
  
  top:-30%;
  
 
}
.btn:after{
 position:absolute;
  top:calc(100% + 30px);
  left:50%;
  transform:translate(-50%,-50%);
  font-family:'Ionicons';
   content:'\f13e';
   color:#fff;
   font-size:20px;
  transition:all 0.5s;
   
}
.btn:hover:after{
  top:50%;
}