CSS 按钮样式：悬停、颜色和背景

在 HTML 中创建一个按钮

要创建一个按钮，需要使用 <button> 元素。

这是一个比使用通用容器更易访问和语义化的选项，通用容器通常使用 <div> 元素创建。

在下面 index.html 文件中，创建了一个网页的基本结构，并添加一个单独的按钮：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Button Style</title>
</head>
<body>
    <button type="button" class="button">Click me!</button>
</body>
</html>

逐步解析这一行代码：

1

<button type="button" class="button">Click me!</button>

首先，添加了按钮元素，它由一个开始 <button> 标签和结束的 </button> 标签组成。
<button> 开始标签中的 type="button" 属性明确地创建了一个可点击的按钮。由于这个特殊的按钮不是用来提交表单的，为了语义上的原因，添加它是很有用的，可以使代码更清晰，不会触发任何不需要的动作。
class="button" 属性将用于在单独的 CSS 文件中为按钮添加样式。button 的值可以是任何你选择的名称。例如，你也可以使用 class="btn" 。
文本 Click me! 是按钮内部可见的文本。

所有应用于按钮的样式都将放在一个单独的 style.css 文件中。

你可以通过链接这两个文件来将样式应用于 HTML 内容。你可以在 index.html 中使用 <link rel="stylesheet" href="style.css"> 标签来做到这一点。

在 style.css 文件中添加一些样式，仅将按钮居中显示在浏览器窗口中间。

请注意，class="button" 是与 .button 选择器一起使用的。这是将样式直接应用于按钮的一种方式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


* {
  box-sizing: border-box;
}

body {
  display:flex;
  justify-content: center;
  align-items: center;
  margin:50px auto;
}

.button {
  position: absolute;
  top:50%
}

上面的代码将产生以下结果：

按钮的默认样式会根据所用的浏览器而有所不同。

这是 Google Chrome 浏览器中按钮的原生样式的示例。

如何改变按钮的默认样式？

如何改变按钮的背景颜色？

要改变按钮的背景颜色，应使用 CSS 的 background-color 属性，并给一个喜欢的颜色值。

在 .button 选择器中，使用 background-color:#0a0a23; 来更改按钮的背景颜色。

1
2
3
4
5


.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
}

如何改变按钮文本颜色？

文本的默认颜色是黑色，因此当添加了深色背景颜色时，会发现文本消失了。

此外还应注意按钮的背景颜色和文本颜色之间要有足够的对比度，这有助于文本的阅读，同时对眼睛也更友好。

使用 color 属性更改文本颜色：

1
2
3
4
5
6


.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
}

如何改变按钮边框样式？

注意按钮边缘的灰色，那是按钮边框的默认颜色。

修复这个问题的一种方法是使用 border-color 属性。将值设置为与 background-color 的值相同。这样可以确保边框与按钮的背景颜色相同。

另一种方法是通过使用 border:none; 完全移除按钮周围的边框。

1
2
3
4
5
6
7


.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
}

接下来，可以使用 border-radius 属性来使按钮边缘变圆，就像这样：

1
2
3
4
5
6
7
8


.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
  border-radius:10px;
}

也可以使用 box-shadow 属性在按钮周围添加一个轻微的暗影效果：

1
2
3
4
5
6
7
8
9


.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
  border-radius:10px;
  box-shadow: 0 0 2px 2px rgb(0,0,0);
}

如何改变按钮的大小？

创建按钮边框内更多空间的方式是增加按钮填充。

为按钮的顶部、底部、左侧和右侧都填充 15px ，同时使用 min-height 和 min-width 属性设置最小高度和宽度。

按钮需要足够大以适应不同类型的设备。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
  border-radius:10px;
  padding:15px;
  min-height:30px;
  min-width: 120px;
}

如何为按钮状态添加样式？

按钮有三种不同的状态：

:hover
:focus
:active

这三种状态的样式最好是不同的，不要共享共同的样式。

接下来简要解释每个状态的含义和触发条件，以及每个状态设置按钮样式的方法。

如何为按钮 `:hover` 状态添加样式？

当用户鼠标悬停在按钮上，即在不选中或点击按钮的情况下，按钮进入 :hover 状态。

要在鼠标悬停时更改按钮的样式，应使用 :hover CSS 伪类选择器。

使用 :hover 的一个常见变化时改变按钮的背景颜色。为了是这种变化不那么突然，可以将 :hover 与 transition 属性搭配使用。

transition 属性将有助于使从无状态到 :hover 状态的过渡更加平滑。背景颜色的变化会比没有 transition 属性时慢一些。这也有助于使最终结果对用户不那么突兀。

1
2
3
4


.button:hover {
    background-color:#002ead;
    transition: 0.7s;
}

在上面的例子中，使用了一个 Hex 颜色代码值，使鼠标悬停在按钮上时的背景颜色变得更浅。

借助 transition 属性，从无状态到 :hover 状态过渡中添加了 0.7s 的延迟。这使得从原来的 #0a0a23 背景色过渡到 #002ead 背景色的速度变慢。

:hover 伪类对移动设备屏幕和移动应用程序不起作用。

如何为按钮 `:focus` 状态添加样式？

:focus 适用于键盘用户，按 Tab 键（⇥）聚焦在按钮时，会激活此状态。

当按钮获得焦点时，周围有轻微的浅蓝色轮廓。效果如下：

浏览器提供了 :focus 伪类的默认样式，用于辅助键盘导航的目的。不建议完全去掉该样式，但你可以自定义样式，使其更容易被发现。一个简单的设置方式如下：

将轮廓颜色设置为 transparent 。
将轮廓样式 outline-style 保持为 sold 。
使用 box-shadow 属性，设置元素被聚焦时的颜色

1
2
3
4
5


.button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
}

你还可以根据想达到的效果，再次将这些样式与 transition 属性一起使用：

1
2
3
4
5
6


.button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
    transition: 0.7s;
}

如何为按钮 `:active` 状态添加样式？

使用鼠标或触控板点击按钮时，:active 状态会被激活。

当应用并保持 :hover 和 :focus 状态的样式后，看看点击按钮时会发生什么：

当鼠标悬停在按钮上时，:hover 状态的样式会在点击前应用。

:focus 状态的样式也会被应用，因为当一个按钮被点击的时候，它也会获得一个 :focus 和一个 :active 状态。但是，它们并不是一回事。:focus 状态是指当一个元素被选中时，而 :active 是指当用户通过按住并按下一个元素来点击它。

要改变用户点击按钮时的样式，可以将样式应用到 :active CSS 伪选择器上。

举个例子，改变用户点击按钮时的背景颜色：

1
2
3


.button:active {
  background-color: #ffbf00;
}