Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
19 replies
althepal78

scaleX()

So I understand how to use the typical css scaleX() but I am wanting to do is confusing. First I want to make a hover effect that allows me to make a button looked like it grew to the right, however I am getting it gowing from the middles and moving from the center out. I am confused how to do this 
.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: transform 1s ease-in-out;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  transform : scaleX(1.5);
  font-size: 1.5em;
  text-align: left;
  transform: scalex(1.5);
}
Was this page helpful?