如何在 HTML 和 CSS 中添加按钮

在 Web 开发中，按钮是一个很常见的组件，可以用来触发页面上的各种操作和动作。本文将介绍如何在 HTML 和 CSS 中添加不同样式的按钮。

HTML 中创建按钮

在 HTML 中，我们使用 button 元素来创建按钮。 button 元素有三个常用属性：

• type：定义按钮类型，默认为 submit。其它可用值有 button 和 reset。
• name：定义按钮的名称，用于表单提交时区分不同按钮。
• value：定义按钮的值，用于表单提交时传递给后台。

以下是一个简单的按钮元素的示例：

<button type="button" name="btn1" value="Click me">Click me</button>

在上面的示例中，我们创建了一个 type 值为 button 的按钮，定义了按钮的名称为 btn1，值为 Click me。按钮上显示的文本也是 Click me。

CSS 中样式按钮

在 CSS 中，我们可以使用不同的样式和属性来美化按钮。以下是一些常用的样式：

• background-color：定义按钮的背景颜色。
• border：定义按钮的边框样式。
• color：定义按钮上文本的颜色。
• font-size：定义按钮上文本的字体大小。
• padding：定义按钮内部的空白区域。

以下是一个样式按钮的示例：

<button class="btn-primary">Primary Button</button>

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 10px;
}

.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

在上面的示例中，我们使用了一个 class 属性来定义按钮的样式，命名为 btn-primary。这个样式定义了按钮的背景颜色、边框颜色、字体颜色、字体大小、内部空白区域和边框半径。我们还为这个按钮定义了一个鼠标悬停样式，当鼠标移动到按钮上时，背景颜色和边框颜色将会变化。

总结

在 HTML 和 CSS 中添加按钮只需要很少的代码，但是我们可以使用这些元素和属性创建出很多不同样式和交互效果的按钮。有了这些技能，我们可以创建更好的用户体验和更美观的页面。