Does anybody know why my transform scale css isnt working?

Question

I have written a function in JavaScript to enlarge a button and immediately shrink back down to the original size.

It works using other CSS properties. For example, I've changed the color to blue and this works as expected.

Does anybody know why its not doing the same with transform?

Thanks in advance! :)

var btnE = document.querySelector(".btn-e");

btnE.addEventListener('mouseover', function() {
  btnE.classList.add("btn-eScript")
})
btnE.addEventListener("transitionend", function() {
  btnE.classList.remove("btn-eScript")
})

.btn-e {
  margin-left: 155px;
  background-color: rgba(83, 155, 232, 0.9);
}

.btn-s {
  margin-left: 120px;
  background-color: rgb(236, 130, 139);
}

.btn-s,
.btn-e {
  text-decoration: none;
  color: white;
  font-size: 90%;
  font-weight: 100;
  text-align: center;
  padding: 10px 20px;
  border-radius: 25px;
  transition: 0.15s;
}

.btn-eScript {
  color: blue;
  transform: scale(1.5);
}

<div class="btns">
  <a class="btn-s" href="#">Más demos</a>
  <a class="btn-e" href="#">Más demos</a>
</div>

gugateider · Accepted Answer · 2018-10-05T11:33:27.167

5

You need to add a display property to your button:

.btn-s,
.btn-e { display: inline-block; }

http://jsfiddle.net/5dhjLm80/

var btnE = document.querySelector(".btn-e");
btnE.addEventListener('mouseover', function() {
    btnE.classList.add("btn-eScript")
})
btnE.addEventListener("transitionend", function() {
    btnE.classList.remove("btn-eScript")
})

.btn-e {
    margin-left: 155px;
    background-color: rgba(83,155,232,0.9);   
}

.btn-s {
    margin-left: 120px;
    background-color: rgb(236, 130, 139);

}

.btn-s,
.btn-e {
    text-decoration: none;
    color: white;
    font-size: 90%;
    font-weight: 100;
    text-align: center;
    padding: 10px 20px;
    border-radius: 25px;
    transition:  0.15s;
    display: inline-block;
}

.btn-eScript {
      color: blue;
      transform: scale(1.5);
}

<div class="btns">
                <a class="btn-s" href="#">Más demos</a>
                <a class="btn-e" href="#">Más demos</a>
            </div>

edited Oct 05 '18 at 11:33

answered Oct 05 '18 at 11:26

gugateider

1,983
2
13
17

Fantastic thank you! Is that the case with all elements you want to transform? – user10045300 Oct 05 '18 at 11:29
1

Usually 'a' tags, other elements already have display property set to block. If the answer helped you please click as the accepted answer so will help me improve my reputation. Happy coding! – gugateider Oct 05 '18 at 11:30
2

Might be worth putting that JSFiddle into a snippet for ease of access and to guarantee that future visitors will be able to see it :) – frobinsonj Oct 05 '18 at 11:32
1

good idea, just done that. – gugateider Oct 05 '18 at 11:34

Does anybody know why my transform scale css isnt working?

1 Answers1