Animation of button in the Header

• index.html

      <header class="header">
         <div class="logo-box">
            <img src='./img/logo-white.png' alt='Logo' class="logo">
         </div>
         <div class='text-box'>
           <h1 class="heading-primary">
              <span class="heading-primary-main">Outdoors</span>
              <span class="heading-primary-sub">Is where life happens</span>
           </h1>
           <a href='#' class="btn btn-white">Discover our tours</a>         
         </div>
      </header>  
  




---



• styles.css

  
  .text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; /* used for button only */
  }
  
  .heading-primary {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
  
    /* Stops shaking of animation */
    backface-visibility: hidden;      <--------
    /* margin-bottom: 60px; */
    margin-bottom: 6rem;
  }
  
  ...
  
  .btn:link,
  .btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    /* padding: 15px 40px; */
    padding: 1.5rem 4rem;
    display: inline-block;
    /* border-radius: 100px; */
    border-radius: 10rem;
    transition: all 0.2s;
    position: relative;
    font-size: 1.6rem;
  }
  
  .btn:hover {
    transform: translateY(-3px);
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  }
  
  .btn:active {
    transform: translateY(-1px);
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
  }
  
  .btn-white {
    background-color: #fff;
    color: #777;
  }