如何通过改变按钮宽度来停止按钮文本斜体悬停效果？

Question

我实现了一个轮廓按钮。在悬停状态下，按钮的文本变为斜体。然而，在悬停状态下，按钮的轮廓也会发生变化。具体来说，按钮的宽度会稍微变小。详细演示见下：

我希望按钮大小保持不变，即轮廓应该保持在同一个位置，而不是移动。如何解决这个问题呢？提前谢谢

button {
 border-width: 1px; 
 border-color: #EEEEEE; 
 font-family: "Adobe Garamond Pro";
 font-weight: normal; 
 border-style: solid;
 color: #595959;
}

button:hover {
 font-style: italic;
}

<button id="loginbutton" type="button" title="Enter">Enter</button>

Answer 1

您可以向按钮添加特定的 width 以解决问题。由于默认宽度是自动的，所以它会根据其中的内容切换按钮的宽度。斜体字体需要更多的宽度，这就是它默认切换的原因。

button {
 border: 1px solid #000;
 font-family: "Adobe Garamond Pro";
 font-weight: normal; 
 border-style: solid;
 color: #595959;
 width: 3rem;
}

button:hover {
 font-style: italic;
}

<button id="loginbutton" type="button" title="Enter">Enter</button>

Answer 2

问题是斜体字实际上比标准字体更细。使用固定宽度的建议可能是解决问题的最简洁方法，但并非在所有情况下都可取。

添加填充不一定能解决问题。

此答案包含一个有趣的建议，您可以针对您的用例进行修改：CSS: bolding some text without changing its container's size。您的按钮上已经有了 title 属性，因此您可以采用相同的方法，但将伪元素设置为 font-style: normal.

button {
  border-width: 1px; 
  border-color: #EEEEEE; 
  font-family: "Adobe Garamond Pro";
  font-weight: normal; 
  border-style: solid;
  color: #595959;
  font-size:30px;
  padding:0 1em;
  position:relative;
}

button:hover {
  font-style: italic;
}
button::after {
  display: block;
  content: attr(title);
  height: 0;
  font-style:normal;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}

<button id="loginbutton" type="button" title="Enter">Enter</button>

Answer 3

如果你使用特定的 width 你的按钮那么它会完美地工作，当你悬停时它会像悬停之前一样工作..你只需使用特定的宽度..这里是我的代码希望对你有帮助

button {
  border-width: 1px solid; 
/*    border-color: #EEEEEE;  */
  border-color: #000; 
  font-family: "Adobe Garamond Pro";
  font-weight: normal; 
  border-style: solid;
  color: #595959;
  width : 50px;
  display: inline-block;
}

button:hover {
  font-style: italic;
}



<button id="loginbutton" type="button" title="Enter">Enter</button>

你也可以删除悬停样式斜体..只需评论或删除你的悬停css然后它就会起作用

如何通过改变按钮宽度来停止按钮文本斜体悬停效果？

How to stop Button text italic hover effect from shifting button width?

html

css