按钮在网站上有许多用途--有用于在图片上悬停和在网页上导航的大按钮，还有用于显示产品或服务信息的更微妙的按钮。
然而，即使是有经验的网页设计师也会对按钮感到恐惧。按钮有许多属性，可能需要很长时间才能掌握，而且如果使用不当或过度使用，可能会在你的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：
.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;
}
现在，这个按钮看起来好多了：
如果你希望你的按钮是圆形的，你可以把它的边界半径增加到25px。
你可以在你的网站上使用这样一个普通的按钮，但在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;
}
在上面的代码中，当你在按钮上悬停时，会有一个从左到右滑动的动画，并将背景颜色变为蓝色。你可以在下面的代码栏中查看这个动画按钮。
如果你想让你的按钮动画从右向左移动，只要把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;
}
上面的代码会产生这样的结果：
按钮的可访问性考虑
链接与按钮
开发者面临的主要问题之一是不知道何时使用按钮。这听起来很傻，但这是一个真正的问题，因为按钮很容易被样式为按钮的链接所取代。虽然这可能有效，但这不是一个好的做法，主要是因为屏幕阅读器。
当屏幕阅读器或任何种类的辅助设备扫描一个网页时，它会获得有关该网页的HTML结构的信息，并大声读出内容，所以在应该使用<button> 元素时，使用链接元素<a> ，对于必须使用这些辅助技术与网页互动的用户来说是有问题的。
知道何时使用这两个元素很简单。根据Angular的说法，<button> 元素应该用于在当前页面上执行动作的任何交互，而<a> 元素应该用于导航到另一个视图或页面的任何交互。就是这么简单!
作为一名开发人员，您应该知道在创建按钮时如何使用正确的语义学HTML元素。它让用户对控件的行为有一个合理的预期，让您能够写出更轻、更好的代码，并且让您的网站更容易维护。
你可以查看这篇文章，了解更多关于现代网络应用的链接与按钮的信息。
按钮的尺寸
按钮的尺寸是2022年按钮样式设计的一个重要部分。事实上，苹果公司在《iPhone用户界面指南》中推荐的按钮尺寸为44x44px，如此重要。较小的按钮会导致灵巧性下降的人的可及性差，并增加你网站的错误率。
使用正确大小的按钮还可以提高你的网站的搜索引擎优化或网络应用，因为谷歌和其他搜索引擎会根据页面的移动友好程度进行排名。确保你的按钮既大又有足够的距离，可以增加你的页面的可访问性，使其排名更高。
为按钮使用适当的语义
我们在上面讨论了使用<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> 元素来重新创建一个按钮，会破坏键盘导航，转移浏览器焦点，并使屏幕阅读器混淆，从而对你的网站产生负面影响。下面是这种情况发生的原因。
键盘导航
网络无障碍性最重要的方面之一是键盘导航。这主要是由于大量有运动障碍的人必须使用键盘进行网络导航。他们必须使用Tab按钮来浏览链接、按钮等互动组件。
在我们上面创建的例子中，使用键盘导航的人将只能使用Tab按钮来关注和点击使用<button> 元素创建的按钮。而使用<div> 元素创建的按钮则无法做到这一点，因为虽然它们看起来都一样，但浏览器更关心的是这个元素是什么，而不是它看起来像什么。
虽然键盘导航允许用户关注那些被设计成按钮的链接，但就像我之前解释的那样，这是不理智的，因为这会扰乱屏幕阅读器。
转移浏览器焦点
不适当地转移浏览器焦点通常发生在用<a> 元素来创建一个按钮，而不是用<button> 元素。<a> 元素是为非页面导航设计的，所以当它被用于页面上的触发动作时，会引起无障碍性问题，使浏览器不适当地转移焦点，导致网站的用户体验不佳。
结论
这把我们带到了本文的结尾。设计一个按钮可能很复杂，但掌握它的窍门很有趣。你有很多理由应该知道如何正确地设计一个按钮，从更好的SEO和美学到更好的可访问性和网站性能。我希望这篇文章对你有帮助，并成为你的按钮小抄。直到下一次!
