'button turn sideways anchor

I have a button that I am quite content with, and it animates well. However, I wish to rotate it 90 degrees to have it face down instead. I used transform: rotate(90deg);. However, this sorta skews it and the button moves to the right when hovered. Can anyone help? Here is my code:

button{
  transform: rotate(90deg);
  padding: 15px 10px;
  border: 2px solid red;
  border-radius: 5px;
  background-color: white;

  
  word-spacing: 1px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
}

button:hover{
  background-color: red;
  color: white;
  word-spacing: 10px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="button.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button>More →</button>
  <script src="script.js"></script>
</body>

</html>

The problem is that when hovered, the button moves a bit to the right. Thank you for any help!

htmlcssbuttonrotation


Solution 1:[1]

What I have found that is causing this kind of visual bugs is the way the transform origin is set.

In this case, you can set a transform-origin: left and it will make it transform correctly. Take a look:

button {
  transform: rotate(90deg);
  padding: 15px 10px;
  border: 2px solid red;
  border-radius: 5px;
  background-color: white;
  transform-origin: left;
  word-spacing: 1px;
  margin-left: 50px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
}

button:hover{
  background-color: red;
  color: white;
  word-spacing: 10px;
  -webkit-transition: word-spacing 200ms linear, background-color 200ms linear, color 200ms linear;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="button.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button>More ?</button>
  <script src="script.js"></script>
</body>

</html>

Solution 2:[2]

It's shifting because of your "word-spacing: 10px" which makes the button translate in order to contain the new sizing of the letters

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tets Tets
Solution 2 Harsh Manvar

Related Questions