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>

Related - https://stackoverflow.com/questions/33305109/why-cant-inline-elements-be-transformed — Paulie_D, Jan 09 '18 at 16:08

score 18 · Accepted Answer · answered Jan 09 '18 at 16:06

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>

score 3 · Answer 2 · answered Jan 09 '18 at 16:10

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;
}

score 0 · Answer 3 · answered Jan 09 '18 at 16:46

.text-box {
  margin: 30px auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-family: sans-serif;
}
.btn {
   text-transform: uppercase;
   padding: 15px 40px;
   text-decoration: none;
   border-radius: 100px;
 }
.btn-white {
   background-color: white;
   border: 1px solid #666;
   color: #777;
   transform: scaleY(1);
   transition: transform 1.5s ease;
}
.btn-white:hover {
    transform: scaleY(2);
 }

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

<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>

transform not working on css hover element

3 Answers3