<div class="page">
  <a href="#" class="link v1">A v1 Link</a>
  <a href="#" class="link v2">A v2 Link</a>
  <a href="#" class="link v3">A v3 Link</a>
  <a href="#" class="link v4">A v4 Link</a>
</div>

:root {
  --timing: 0.3s;
  --timing2: 1s;
  --pageBG: FloralWhite;
  --bg1: LightSteelBlue;
  --bg2: Bisque;
  --bg3: Lavender;
  --bg4: MistyRose;
}

html, body {
  font-size: 20px;
  font-family: sans-serif;
}
.page {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 90vh; 
  background: var(--pageBG);
  
  /* create a new stacking context */
  position: relative;
  z-index: 0;
}
a { 
  border: solid 1px gray;
  padding: 0.5rem;
  margin: 0.5rem 0;
  text-decoration: none;
  color: DarkBlue;
}
/* general link setup */
.link {
  position: relative; /* need this for ::before absolute to work */
  display: inline-block;
  overflow: hidden; 
  &::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1; /* move layer down */
    z-index: -1;
  }
}
.v1 {
  /* animate bg up from bottom */
  &::before {
    background-color: var(--bg1);
    transform: translateY(100%);
    transition: transform var(--timing) ease;
  }  
  /* hover state */
  &:hover {
    &::before {
      transform: translateY(0);
    }
  }
}
.v2 {
  /* animate from right to left and out */
  &::before {
    background-color: var(--bg2);
    transform: translateX(120%) skew(40deg);
    transition: transform var(--timing2) ease;
  }  
  /* hover state */
  &:hover {
    &::before {
      transform: translateX(-120%);
    }
  }
}
.v3 {
  /* animate scale up */
  &::before {
    background-color: var(--bg3);
    scale: 0;
    transition: scale var(--timing) ease;
  }  
  /* hover state */
  &:hover {
    &::before {
      scale: 1;
    }
  }
}
.v4 {
  /* animate scale up with rotate */
  &::before {
    background-color: var(--bg4);
    scale: 0;
    rotate: 360deg;
    transition: all var(--timing) ease;
  }  
  /* hover state */
  &:hover {
    &::before {
      scale: 1;
      rotate: 0deg;
    }
  }
}