基础 CSS 按钮组基础知识

按钮是网站和应用程序常用的基本组件之一。在设计一个好看、易于使用的按钮组时，CSS 是一个非常强大的工具。本文介绍了一些基础的 CSS 按钮组知识。

CSS 属性

基本属性

以下是创建按钮的基本 CSS 属性：

• background-color：按钮的背景颜色；
• color：按钮的字体颜色；
• font-size：按钮字体的大小；
• border：边框的样式、宽度和颜色。

以下是一些示例代码片段：

/* 按钮的背景颜色为红色 */
button {
  background-color: red;
}
/* 白色字体，黑色背景，3 像素实线边框 */
button {
  color: white;
  background-color: black;
  border: 3px solid black;
}

悬停属性

当用户将鼠标悬停在按钮上时，您可能想要更改按钮的样式以让用户知道该按钮可以单击。以下是一些常用的 hover 属性：

• background-color：按钮的背景颜色在悬停时的颜色；
• color：按钮字体悬停时的颜色；
• text-decoration：悬停时下划线或其他文本装饰的添加或移除；
• cursor：移动到按钮上时鼠标的样式。

以下是一些示例代码片段：

/*按钮悬停时透明度降低*/
button:hover {
  opacity: 0.8;
}
/*红色字体，绿色背景，无文本装饰*/
button:hover {
  color: red;
  background-color: green;
  text-decoration: none;
}

禁用属性

有时需要禁用按钮之接受用户输入。以下 CSS 属性可以用于这些按钮：

• opacity：按钮禁用时透明度的降低；
• cursor：禁止用户在禁用的按钮上单击。

以下是一个示例代码片段：

/* 禁用时降低透明度，鼠标样式为“禁止” */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

常见布局

以下是三种常见的按钮布局：

• 行内按钮；
• 容器内垂直居中的按钮；
• 容器内水平居中的按钮。

以下是一些示例代码片段：

<!-- 行内按钮 -->
<p>
  <button>按钮 1</button>
  <button>按钮 2</button>
  <button>按钮 3</button>
</p>

<!-- 容器内垂直居中的按钮 -->
<div style="height: 100px; display: flex; align-items: center;">
  <button>按钮</button>
</div>

<!-- 容器内水平居中的按钮 -->
<div style="text-align: center;">
  <button>按钮</button>
</div>

结论

通过使用 CSS，我们可以创建漂亮而易于使用的按钮组，使用户对我们的网站或应用程序具有更好的体验。 本文介绍了按钮的基本样式和常见的布局技巧。 还有很多样式和技术可以用于按钮设计，这只是一个开始。