基础 CSS 按钮空心样式

在网页设计中，按钮是最常用的交互元素之一。按钮不仅可以用于跳转页面，还可以用于提交表单、触发事件等。在设计按钮时，除了文字和图标以外，按钮的样式也是非常重要的。本文将介绍如何使用 CSS 制作一个基础的空心样式按钮。

HTML 代码

首先，我们需要在 HTML 中创建按钮元素。以下是一个简单的按钮代码示例：

<button class="button-outline">点击我</button>

这里，我们使用了 button 元素，并添加了一个名为 button-outline 的类作为样式的标识。

CSS 样式

接下来，我们需要使用 CSS 为按钮添加样式。以下是一个基础的空心按钮样式：

.button-outline {
  padding: 8px 16px;
  border: 1px solid #333; /*按钮边框*/
  color: #333; /*文字颜色*/
  background-color: transparent; /*背景颜色为透明*/
  cursor: pointer; /*鼠标悬停时显示手形*/
  transition: all 0.3s ease; /*添加过渡动画*/
}

.button-outline:hover {
  color: #fff; /*鼠标悬停时文字变为白色*/
  background-color: #333; /*鼠标悬停时添加背景颜色*/
}

这个样式代码使用了 padding 属性来设置按钮的内边距。border 属性用于设置按钮的边框，我们使用了 1 像素的实线边框。color 属性设置了按钮的文字颜色。background-color 属性被设置为透明，以便我们可以看到按钮后面的背景。cursor: pointer 当鼠标悬停在按钮上时，会显示一个手形光标。transition 属性用于添加过渡动画，使按钮在响应鼠标操作时更平滑。

在 .button-outline:hover 选择器中，我们对按钮的鼠标悬停状态进行了样式设置。我们将文字颜色设置为白色，将按钮的背景颜色设置为黑色，以便使按钮看起来更突出。

结论

这就是制作空心样式按钮的所有内容了。通过使用 CSS，我们可以定制按钮样式，使其更符合我们网站的主题和要求。使用这个基础样式，您可以进行更多的定制，例如改变边框颜色、设置按钮圆角、更改字体和大小等等。希望这篇文章对您有所帮助！