<h1>Hover the buttons to see different animations!</h1>
<a href="#" class="btn black">Button black</a>
<a href="#" class="btn orange">Button orange</a>
<a href="#" class="btn green">Button green</a>
<a href="#" class="btn blue">Button blue</a>
<a href="#" class="btn pink">Button pink</a>

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Francois One", sans-serif;
  background-image: linear-gradient(to right bottom, #fff, #f4edfc);
  box-sizing: border-box;
  height: 200vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.btn {
  border-radius: 4px;
  text-transform: uppercase;
  position: relative;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid black;
  padding: 1rem 2rem;
  font-size: 3rem;
  background-size: 300%;
  transition: all 0.6s;
}

.black {
  color: black;
    background-image: linear-gradient(90deg, white 50%, black 50%);
}

.green {
    color: green;
    background-image: linear-gradient(-120deg, green 50%, white 50%);
}
.orange {
    color: orange;
    background-image: linear-gradient(120deg, white 50%, orange 50%);
}

.blue{
  color: blue;
    background-image: linear-gradient(160deg, white 50%, blue 50%);
}

.pink{
  color: pink;
  background-image: linear-gradient(20deg, white 50%, pink 50%);
}

.btn:hover {
  color: #fff;
  background-position: 100%;
  transform: translateX(0.5rem);
}

.btn:active {
  transform: translate(0.5rem, 0.5rem);
  box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.75);
}