如何在Div内部增加宽度时保持Button不缩小高度？

Question

我的网站上有一个div内的按钮标签，当用户将鼠标悬停在它上面时，它会像这样增加宽度，这样看起来效果不错。

btn.onmouseover = function(){this.style.background = "#07334f"; this.style.width = "100%" ; this.style.right = "4%"} 
    btn.onmouseout = function(){this.style.background = "#123f5b"; this.style.width = "90%" ; this.style.right = "-0.35%"} 

然而，当此按钮内的文本是恰到好处的长度和宽度增加文本从两条线去一个，并创建一个丑陋的风格。

我想知道是否有一种方法可以从两条线去一个保持文本时，宽度增加

按钮中的文本将从此

text inside 
button 

去像这在一行使得按钮尺寸的缩小，以及扭曲的外观使得它怪异用户与因为它在

text inside button 

Answer 1

调整大小鼠标交互

很BT n类型=按钮的输入元素？

相反，您可以使用一个按钮标签，它支持文本内的换行符。

<button>text inside<br />button</button> 

或者只是使用一个标签和样式它像一个按钮。