Chrome 按钮黑白色边框 - CSS

如果您需要一个简单但有吸引力的按钮样式，这种黑白色边框样式可能适合您的需求。

这是一个Chrome风格的按钮样式，它具有黑白两种边框颜色，以及过渡效果，可以在用户将鼠标悬停在按钮上时应用。

HTML

首先，让我们定义一个按钮元素并添加样式类：

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

CSS

接下来，我们需要定义CSS样式来创建Chrome风格的按钮：

/*定义按钮的样式类*/
.chrome-btn {
  /*添加白色边框*/
  border: 1px solid #fff;
  /*添加黑色边框*/
  border-bottom: 3px solid #000;
  /*添加圆角边框*/
  border-radius: 4px;
  /*定义背景颜色*/
  background-color: #fff;
  /*定义文本颜色*/
  color: #333;
  /*添加过渡效果*/
  transition: border-bottom-color 0.2s ease-in-out;
}

/*鼠标悬停在按钮上时应用的样式*/
.chrome-btn:hover {
  /*更改黑色边框颜色为白色*/
  border-bottom-color: #fff;
}

示例

您可以在下面看到一个简单的示例。

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

.chrome-btn {
  border: 1px solid #fff;
  border-bottom: 3px solid #000;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  transition: border-bottom-color 0.2s ease-in-out;
}

.chrome-btn:hover {
  border-bottom-color: #fff;
}

您可以将此CSS代码添加到您的项目中，并根据需要进行修改。