基础 CSS 按钮大小

CSS 中的按钮可以通过自定义样式改变其大小。本文将介绍如何使用 CSS 控制按钮的大小。

HTML 代码

首先，在 HTML 中创建一个按钮元素。

<button class="btn">Click me</button>

CSS 代码

然后在 CSS 中设置按钮的大小。以下是设置按钮大小的示例代码：

.btn {
  padding: 12px 24px; /* 设置按钮内边距 */
  font-size: 16px; /* 设置字体大小 */
  line-height: 1.5; /* 设置行高 */
  border-radius: 4px; /* 设置圆角 */
  background-color: #4CAF50; /* 设置背景颜色 */
  color: #fff; /* 设置字体颜色 */
}

解析

内边距 (padding)

使用 padding 属性设置按钮的内边距。内边距是指按钮内容与边框之间的距离。可以设置一个值，如 padding: 10px;，它会将所有边的内边距都设置为相同的值；也可以用两个值，如 padding: 10px 5px;，它会将左右两边的内边距设置为 5px，上下两边的内边距设置为 10px。

字体大小 (font-size)

使用 font-size 属性设置按钮的字体大小。可以设置像素值、EM、百分比等，如 font-size: 16px;。

行高 (line-height)

使用 line-height 属性设置按钮的行高。行高是指一行文字的高度，通常通过设置与字体大小相同的值来使按钮内容垂直居中。如 line-height: 1.5;。

圆角 (border-radius)

使用 border-radius 属性设置按钮的圆角。圆角可以让按钮更圆润，常用值是像素和百分比。如 border-radius: 4px;。

背景颜色 (background-color)

使用 background-color 属性设置按钮的背景颜色。可以使用颜色名称、HEX 值、RGB 值等。如 background-color: #4CAF50;。

字体颜色 (color)

使用 color 属性设置按钮的字体颜色。可以使用颜色名称、HEX 值、RGB 值等。如 color: #fff;。

完整代码

<button class="btn">Click me</button>

.btn {
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 4px;
  background-color: #4CAF50;
  color: #fff;
}

以上完整示例代码将生成一个绿色的按钮，字体为白色，内边距为 12px 24px，圆角为 4px，字体大小为 16px。