button turn sideways anchor-CodePudding

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!

CodePudding user response：

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>

CodePudding user response：

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