logo标签列表

如何在CSS中改变字体大小但不改变按钮大小

htmlcssfont-size
6
在下面的代码中，我想只改变内部字体大小而不改变按钮大小。
<html>
    <head>
        <style>
            .sm {
                font-size:x-small;
            }
        </style>
    </head>
    <body>
        <button class="sm">submit</button>
    </body>
</html>
你必须指定高度。 - vijay
如果您希望按钮保持居中，可以将按钮填充减少增加文本像素值的一半。 - Korgrue
4个回答
8
要在不改变按钮大小的情况下更改文本大小，您需要固定按钮的大小。这可以使用CSS中的height和width来完成。这样，您可以更改font-size而不影响按钮大小。
请看下面的代码。正如您所看到的，通过更改height和width，按钮现在具有固定的大小。这是由文本比按钮更大所证明的。
CSS
button {
  font-size: 30px;
  height: 60px;
  width: 60px;
}

HTML

<button>
Hello
</button>
5
您也可以使用span标签，我用它表现得很好。
 <button><span style="font-size:10px;">ClickMe</span></button>
1
将您的样式更改为此。
.sm
{
  font-size:20px;
  height:30px;
  width: 120px;
}

希望这有所帮助！
0
另一种实现这个目标的方法是利用第三维度。
这种方法不需要您固定按钮的大小，使其仍然适应内容大小。它还可以缩放您放置在按钮中的任何SVG或其他内容，以提供漂亮的悬停弹出效果。
HTML
<button>
    <div>
        Button Text
    </div>
</button>

CSS

button div {
  -webkit-transition: -webkit-transform 0.14s ease;
}

button:hover div {
  -webkit-transform: perspective(100px) scale(1.05);
}
button:active div {
  -webkit-transform: perspective(100px) scale(1.08);
}

我不确定这是否是您想要实现的，但我认为这是一个很棒的解决方案，如果有人想尝试它，我想分享一下。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接