Text 애니메이션 Hover 효과

 

Body

<!-- HINT: hover over button -->
<div class="c--anim-btn">
  <span class="c-anim-btn">
    First Text
  </span>
  <span>
    Second Text
  </span>
</div>

 

 

CSS

.c--anim-btn span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}

.c--anim-btn, .c-anim-btn {
  transition: 0.3s;     
}

.c--anim-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.c-anim-btn{
  margin-top: 0em;   
}

.c--anim-btn:hover .c-anim-btn{
  margin-top: -4em;
}

 

 

 

https://codepen.io/RichardBray/pen/julhw