I've developed a JavaScript function that enlarges a button and then smoothly shrinks it back to its original size.
The function successfully changes the color of the button to blue, but for some reason, it's not working with the transform property. Any insights on why this might be happening?
Appreciate any help! :)
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="#">More Examples</a>
<a class="btn-e" href="#">More Examples</a>
</div>