title: transform not working on css hover element
body: <p>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. </p>
  
  <p>Is anyone able to see what I am doing wrong here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="logobox"&gt;
    &lt;img src="img/logo-white.png" class="logo" alt="logo"&gt;
  &lt;/div&gt;
  &lt;div class="text-box"&gt;
    &lt;h1 class="primary-header"&gt;
      &lt;span class="heading-primary-main"&gt;Outdoors&lt;/span&gt;
      &lt;span class="heading-primary-sub"&gt;is where life happens&lt;/span&gt;
    &lt;/h1&gt;
    &lt;a href="#" class="btn btn-white"&gt;Discover Our Tours&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>