考虑到可访问性，使用 CSS 设置按钮样式

最新推荐文章于 2024-05-16 03:09:27 发布

pxr007

最新推荐文章于 2024-05-16 03:09:27 发布

阅读量1.1k

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_47967031/article/details/127151830

版权

按钮在网站上有很多用途——有用于悬停在图像上和在网页上导航的大按钮，以及用于显示有关您的产品或服务的信息的更微妙的按钮。

然而，按钮甚至可以吓倒经验丰富的网页设计师。按钮有许多可能需要很长时间才能掌握的属性，如果使用不当或过度使用，可能会在 CSS 中增加不必要的大文件。

本文将介绍如何将优雅的样式应用到您的按钮，以创建一个有吸引力的、可重用的按钮组件，为业务做好准备。我们还将特别注意在 2022 年制作按钮时应考虑的可访问性注意事项。不要再浪费时间了，让我们开始吧。

向前跳：

创建一个普通按钮并为其设置样式
创建和设计复古按钮
按钮可访问性注意事项
- 链接与按钮
- 按钮大小
为按钮使用正确的语义
- 键盘导航
- 转移浏览器焦点

创建一个普通按钮并为其设置样式

在本节中，我们将为两个按钮设置样式——一个普通按钮和一个复古风格按钮，两者都带有悬停动画。

创建一个按钮非常简单。您需要做的就是将以下内容插入到您的 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>Document</title>
</head>
<body>
    <button class = btn>Button</button>

</body>
</html>

我用了一类 btn但是您可以随意命名按钮。接下来是更复杂的部分：按钮样式。这是一个没有样式的按钮的样子。

为了正确设置按钮样式，我们将针对该类并使用 CSS 进行一些更改。我们之前在本文中讨论过如何创建和设置基本按钮的样式，但今天我们将更仔细地研究它们。

让我们为按钮添加一些 CSS。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

.btn {
    min-width: 150px;
    height: 50px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border-radius: 5px;
    z-index: 0;
    background: red;
    overflow: hidden;
    border: 2px solid green;
    color: black;
  }

现在按钮看起来好多了：

如果您希望您的按钮是圆形的，您可以将其边框半径增加到 25 像素。

您可以在您的网站上使用像这样的普通按钮，但在 2022 年，有更高级的方式来设置您的按钮样式。样式按钮最受欢迎的功能之一是动画。通过将 CSS 动画与 CSS 悬停效果相结合，您可以使一个普通的按钮响应，这使您的网站更加直观和有趣，便于用户浏览。本文更详细地介绍了动画按钮。

让我们使用以下代码为我们的按钮添加动画。

.btn:hover {
    color: #fff;
  }
  .btn:hover:after {
    width: 100%;
  }
  .btn:after {
    content: "";
    position: absolute;
    z-index: -1;
    transition: all 0.3s ease;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: blue;
  }

在上面的代码中，当你将鼠标悬停在按钮上时，会有一个从左到右滑入的滑动动画，并将背景颜色变为蓝色。您可以在下面的 codepen 中查看动画按钮：

如果您希望按钮动画从右向左移动，只需更改 left: 0;至 right: 0;.

在设置按钮样式时，动画至关重要，因为它们为组件带来活力。无论您是创建一个大的号召性用语按钮还是一个较小的下拉菜单按钮，您都可以通过动画获得创意。

创建和设计复古按钮

让我们创建具有更美观复古外观的第二个按钮。

这是HTML：

<button class="btn2">Button 2</button>

接下来，让我们输入 CSS：

.btn2 {
    min-width: 130px;
    height: 40px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border: 1px solid #000;
    color: #000;
    background: transparent;
  }

  .btn2:hover:after {
    top: 0;
    left: 0;
  }

  .btn2:after {
    content: "";
    width: 100%;
    z-index: -1;
    position: absolute;
    height: 100%;
    top: 5px;
    left: 5px;
    transition: 0.7s;
    background-color: #40ff3a;
  }

上面的代码将导致：

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

如果您想使用这些按钮，请查看下面的代码笔。

您还可以查看此代码笔以了解您可以使用的其他漂亮按钮：

按钮可访问性注意事项

链接与按钮

开发人员面临的主要问题之一是不知道何时使用按钮。这可能听起来很傻，但这是一个真正的问题，因为按钮可以很容易地被样式为按钮的链接所取代。虽然这可能有效，但这不是一个好的做法，主要是因为屏幕阅读器。

当屏幕阅读器或任何类型的辅助设备扫描网页时，它会获取有关页面 HTML 结构的信息并大声朗读内容，因此使用链接元素 <a>当你应该使用 <button>对于必须使用这些辅助技术与页面交互的用户来说，元素可能会出现问题。

知道何时使用任一元素很简单。根据 Angular ， <button>元素应该用于在当前页面上执行操作的任何交互，并且 <a>元素应该用于导航到另一个视图或页面的任何交互。就是这么简单！

作为开发人员，您应该知道在创建按钮时如何使用正确的语义 HTML 元素。它为用户提供了对控件行为的合理预期，允许您编写更轻量级和更好的代码，并使您的站点更易于维护。

您可以查看本文以了解有关现代 Web 应用程序的链接与按钮的更多信息。

按钮大小

按钮大小是 2022 年按钮样式的重要组成部分。事实上，苹果在 iPhone 人机界面指南中包含了 44x44 像素的推荐按钮大小。较小的按钮会导致灵活性降低的人的可访问性较差，并增加您网站的错误率。

使用大小合适的按钮还可以改善您网站的 SEO 或网络应用程序，因为 Google 和其他搜索引擎会根据页面的移动友好程度对页面进行排名。确保您的按钮既大又相距足够远，可以提高页面的可访问性并使其排名更高。

为按钮使用正确的语义

我们讨论了使用 <button>上面的元素，但让我们更深入地研究它。使用正确的语义 HTML 元素的重要性对网站的可访问性有重大影响，我将简要解释原因。

首先，让我们重新创建我们之前使用的第一个按钮，但这一次，而不是使用 <button>元素，我们将使用 div.

这是HTML：

<div class="btn3">Button 3</div>

现在，这是CSS：

.btn3 {
    display: flex;
    align-items: center;
    min-width: 150px;
    height: 35px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-left: 20px;
    outline: none;
    border-radius: 25px;
    z-index: 0;
    background: red;
    overflow: hidden;
    border: 2px solid green;
    color: black;
  }

  .btn3:hover {
    color: #fff;
  }
  .btn3:hover:after {
    width: 100%;
  }
  .btn3:after {
    content: "";
    position: absolute;
    z-index: -1;
    transition: all 0.3s ease;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: blue;
  }

上面代码的结果将如下所示。

与我们的原始按钮并排放置，普通人会发现很难在两者之间挑选出实际的按钮，因为使用一点 JavaScript，您可以让它们都做同样的事情。

虽然这两个组件可能看起来相同、行为相同并完成相同的操作，但使用 <div>或者 <a>前面提到的重新创建按钮的元素会破坏键盘导航、转移浏览器焦点和混淆屏幕阅读器，从而对您的网站产生负面影响。这是如何发生的。