纯 CSS 按钮大小

使用 CSS 可以轻松创建各种样式和效果，包括调整按钮大小。在本文中，我们将为您介绍如何使用 CSS 来设置按钮的大小和尺寸。

通过设置 width 和 height

最简单的设置按钮大小的方法是使用 width 和 height 属性。例如，要创建一个宽度为 100px，高度为 50px 的按钮：

button {
  width: 100px;
  height: 50px;
}

通过设置 padding

另一种设置按钮大小的方法是使用 padding 属性。 padding 属性用于控制元素（例如按钮）的内容区域与元素边框之间的距离。通过调整 padding，可以增加或减少按钮的大小，而不会更改按钮的宽度和高度。

例如，要创建一个宽度为 100px，高度为 50px 的按钮：

button {
  padding: 15px 30px;
}

通过设置 font-size

还有一种设置按钮大小的方法是使用 font-size 属性。 font-size 属性控制按钮内文本的大小，从而影响按钮的尺寸。

例如，要创建一个宽度为 100px，高度为 50px 的按钮：

button {
  font-size: 20px;
  padding: 10px;
}

结论

以上是三种使用 CSS 设置按钮大小的方法。通过调整 width、height、padding 或 font-size 属性，您可以轻松地自定义您的按钮。只需根据需要选择方法即可。

参考资料

• MDN web docs
• W3Schools