<html>
<button class="plane-send">
    <i class="material-icons" data-content="send">send</i>
</button>
</html>
html {
  font-size: 14px;
  background-color: #f1f1f1;
  position: relative;
  height: 100vh;
  width: 100vw;
}

@keyframes rotate-the-funk {
    0% {transform:rotate(360deg);}
    50% {transform: rotate(0deg)}
    100% {transform: rotate(-360deg)}
}

@keyframes shadow {
  0% {transform: scale(1) translate(-20%, -10%);}
  25% {transform: scale(0.5) translate(-20%, -10%);}
  50% {transform: scale(1) translate(-20%, -10%);}
  75% {transform: scale(0.5) translate(-20%, -10%);}
  100% {transform: scale(1) translate(-20%, -10%);}
}

button {
  font-size: 2.85rem;
  background-color: #186b49;
  border:0;
  border-radius: 0.5rem;
  position: absolute;
  left:50%;
  top:50%;
  overflow: hidden;
  border-bottom:4px solid #10452f;
  transform: translate(-100%,-100%);
  transition: 1s border, 0.75s transform;
  
  
  .material-icons {
    transform: rotate(360deg);
    position: relative;
    color: white;
    position: relative;
    font-size: 50px;
    padding: 2.75rem 3rem 2rem 4rem;
    transform-origin: top center;
    
    &:before {
      content:attr(data-content);
      position: absolute;
      color: #166142;
      left: 50%;
      top:50%;
      transform: scale(1) translate(-20%, -10%);
      z-index:-1;
      transform-origin: bottom center;
    }
  }
  
  &:hover {
     border-bottom: 4px solid #186b49;
     transform: translate(-100%, calc(-100% + 2px));
    
    .material-icons {
      animation: rotate-the-funk 2.25s forwards;
      &:before {
        animation: shadow 2.25s forwards;
      }
    }
  }
  
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.