html - 如何阻止文本使我的圆形按钮变成椭圆形？

Question

我正在使用 Pug 和 CSS 制作一个圆形按钮，它看起来像这样，里面没有任何文本:

这是我使用的代码

button(class="round-button")

.round-button {border: none; padding: 40px; border-radius: 1000px; }

这看起来不错没有文本。如果我添加文本，它看起来像这样:

当按钮中有文本时，如何使按钮保持圆形？

Answer 1

使用边界半径:50%。

高度和宽度也需要相同。

.round-button {
border: none; 
height: 40px;
width: 40px;
border-radius: 50%; 
background-color: pink;
text-align: center;
}

<button class="round-button">text</button>