<div class="models models-1">
  <button class="btn">
    <span class="description">
     Hover me
    </span>
  </button>
</div>

:root {
  
  --models-1: #1A2244;
}

.description {
  
  position: relative;
  display: block;
  z-index: 3;
  color: #000000;
}

.btn {
  
  background: var(--ocean);
  position: relative;
  cursor: pointer;
  padding: 20px 100px 20px 100px;
  font-size: 24px;
  border: none;
}

.models {
  
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &-1 {
    
    background: var(--models-1);
    
    .description {
      
      font-family: 'Krona One', sans-serif;
      color: #ffffff;
      transition: 0.3s ease-in;
    }
    
    .btn {
      
      background: #E1776B;
      overflow: hidden;
      transition: 0.6s ease-in;
      
      &:hover {
        
         transform: rotate(-15deg) skew(15deg);
         box-shadow: -8px 12px 12px 1px rgba(0, 0, 0, 0.65);
        .description {
          
            text-shadow: -4px 4px .3px #969696,
                  -4px 4px .4px #969696,
                  -4px 4px .5px #969696,
                  -4px 4px .6px #969696,
                  -4px 4px .7px #969696;
        }
      }
    }  
  }
}