body {
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* button 1 */
.animate-first {
    font-family: sans-serif;
    text-decoration: none;
    margin: 2rem 2rem;
    padding: 1rem 2rem;
    border: 1px solid #000;
}

.animate-first:hover {
    transform: scale(1.5) rotate(360deg) skew(45deg);
    transition: 200ms;
    
    background-color: #F54927;
    color: #fff;
    border: none;
}

/* button 2 */
.animate-second {
    font-family: sans-serif;
    text-decoration: none;
    margin: 2rem 2rem;
    padding: 1rem 2rem;
/*   border: 1px solid #000; */
  
    animation-name: sidetoside;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes sidetoside {
  0% {
    transform: skew(30deg);
    background-color: #F54927;
    color: #fff;
    border: none;
  }
  
  100% {
    color: #fff;
    transform: skew(-30deg);
    background-color: #2746F5;
  }
}

/* button 3 */
.animate-third {
    font-family: sans-serif;
    text-decoration: none;
    margin: 2rem 2rem;
    padding: 1rem 2rem;
    border: 1px solid #000;
    
    animation: 3s ease-in 1s infinite alternate running slide-in;
}

.animate-third:hover {
    animation-play-state: paused;
}

@keyframes slide-in {
  0% {
    transform: translateX(100vw);
  }
  
  50% {
    transform: translateX(-100vw);
  }
  
  100% {
    transform: translateX(0vw);
  }
}