transform not working on css hover element

Question

I can't seem to find what I am doing wrong here. The transform property should come into effect when the element is hovered, but nothing is happening when the event occurs.

Is anyone able to see what I am doing wrong here?

.btn:link,
.btn:visited {
  text-transform: uppercase;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
}

.btn-white {
  background-color: white;
  color: #777;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

<div class="logobox">
  <img src="img/logo-white.png" class="logo" alt="logo">
</div>
<div class="text-box">
  <h1 class="primary-header">
    <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>

Answer 1

Links are display:inline by default and so are not affected by transform.

Make the link display:inline-block.

.btn:link,
.btn:visited {
  text-transform: uppercase;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .2s;
  display: inline-block;
}

.btn-white {
  background-color: white;
  color: #777;
}

.btn:hover {
  transform: translateY(-30px);
}

.btn:active {
  transform: translateY(-10px);
}

<div class="text-box">
  <h1 class="primary-header">
    <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>

Answer 2

Your link is not a block element, I think that is where the problem is coming from. <a>...</a> is an inline element, you cannot apply transform on those.

The transformable elements are described here.

As for your code itself, this should do the trick:

.btn-white {
  background-color: white;
  color: #777;
  display: inline-block;
}