Get best of the week

样式良好的旧按钮元素

按钮是网页上最常用的那些元素之一。该标记<button></button>可用于启动诸如数据输出之类的过程，打开模式窗口，提交表单等。在我们发布的翻译材料中，我们将讨论元素样式的复杂性button以及如何设计按钮以使其在任何浏览器中都能正常工作。此外，此处还将介绍最常用的按钮样式。我们将在这里讨论使用按钮时出现的一些困难。



样式应用于默认按钮


也许谈论“标准样式”似乎是对一些基本事物的讨论，但实际上，谈论它是非常有趣的。这是Google Chrome用户代理中按钮的标准样式表。

.c-button {
    -webkit-writing-mode: horizontal-tb !important;
    -webkit-appearance: button;
    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
    text-rendering: auto;
    color: initial;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
}

这是当标准按钮的输出未更改默认样式时的外观。


一个应用标准样式的简单按钮：

首先，重新定义propertyappearance。它用于特定于特定平台的样式。使用此方法的按钮外观基于用户操作系统中使用的样式。

.c-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

现在，在重置属性后appearance，看看按钮在不同浏览器中的外观。


这些按钮的外观属性设置为none，

接下来，在继续进行样式设置之前，需要重置更多属性。这- ，border，。border-radiusbackground

.c-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  background: #ccc;
}


重置属性后的按钮

现在我们已经重置了标准按钮样式，是时候继续了。即，我想谈谈如何根据按钮的设计要求来样式化按钮。

样式常规按钮


让我们从一个基本的示例开始，讨论如何设置仅显示文本的常规按钮的样式。下图显示了常规按钮的“解剖结构”。


文字颜色（Text Color），字体大小（Font Size），背景（Background），圆角（Roundness），缩进（Padding）

.c-button {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676D7;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
}

有了上面的CSS代码，我们可以获得与上图所示类似的按钮。设置按钮的基本样式后，您需要注意按钮在各种状态下的外观。


按钮的正常状态（Normal），获得焦点（焦点），将鼠标悬停在按钮上（悬停），禁用按钮（禁用）

▍当您将鼠标悬停在按钮上并获得焦点时，样式将应用于这些按钮


为了向用户指示鼠标指针位于按钮上方，为按钮配备为此事件设计的样式很重要。在使用键盘的用户处理页面的情况下，当按钮获得焦点时更改按钮的外观也是如此。

该材料表明，当您将鼠标悬停在按钮上（hover）和按钮获得焦点（focus）时，添加应用于按钮的样式很重要。

在样式hover之前添加样式时focus，所有样式均可正常工作。在样式focus之前添加样式时，会出现问题hover。用鼠标单击元素时，样式focus不会以任何方式显现出来；只有由样式确定的按钮表示形式可见hover。


好吧，如果首先出现悬停样式，然后是焦点样式

，则正确的样式描述如下所示：

.c-button:hover {
  background: #1d49aa;
}

.c-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}

Button最小按钮宽度


为了使按钮看起来不错，它必须具有一定的宽度。事先考虑一下这一点很重要，并考虑到按钮上可能出现的长标签和短标签。由于该属性，min-width您可以设置按钮的最小宽度。这是我的文章，其中详细讨论了此属性和其他类似属性。

看下图。在那里您可以看到几个按钮，其中包含英语和阿拉伯语长度不同的标签。如果未指定最小按钮宽度，则铭文较短的按钮将太小。最好不要允许使用此属性min-width。


值得设置最小宽度按钮属性

.c-button {
    min-width: 100px;
    /*  */
}

dent缩进


一个想法可能看起来很有吸引力，因此没有为按钮分配水平凹痕。毕竟，按钮具有一定的宽度，这意味着按钮的边缘与按钮上的铭文之间将有足够的空间。所以？不，不是这样。在按钮上的铭文更改的情况下，实施此想法可能会产生负面影响。

看下图。


建议为按钮分配内部缩进，

请注意，如果未将缩进分配给按钮，则位于其上的铭文可能会非常靠近边缘。即使按钮具有属性min-width。在图片的底部，同时使用属性padding和属性min-width。这使您更有信心，在事先不知道显示在其上的铭文长度的情况下，该按钮将看起来不错。

▍字体家族用于按钮上的铭文


默认情况下，表单元素不继承分配给<html>或的字体系列<body>。有趣的是，我写了这篇文章的70％，并且意识到，首先，我没有更改用于演示目的的按钮的字体，其次，我没有编写任何有关它的内容。

要解决此问题，font-family必须将该属性设置为inherit。

.c-button {
    font-family: inherit;
    /*   */
}

disabled禁用样式的按钮


为了向用户指示按钮已被禁用，您可以向其添加属性disabled并使用CSS设置按钮样式。

这是描述禁用按钮的HTML：

<button disabled></button>

以下是样式化此类按钮的CSS代码：

.c-button[disabled] {
    color: #d2d5db;
    background: #6c7589;
    cursor: not-allowed;
}

禁用该按钮时，它无法从键盘上获取焦点，并且已从页面元素的辅助功能树中删除。

you将鼠标悬停在按钮上时的外观


按钮上的标准鼠标指针看起来像箭头。我喜欢这个 StackOverflow上回答：“按钮是一个传统的桌面控制。在这种环境下，直到互联网时代来临之前才使用过指针。当开始在网页上使用相同的控件时，开发人员只是试图使按钮看起来与桌面应用程序中的按钮相同。”

为了覆盖指针的通常行为，建议将标准光标箭头更改为手形光标。


标准箭头光标和改进的手形光标。

现在，我们已经讨论了按钮样式的基本问题，下面是完整的CSS代码，其中包括我们上面提到的所有内容：

.c-button {
  min-width: 100px;
  font-family: inherit;
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4676d7;
  color: #fff;
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
}

.c-button:hover {
  background: #1d49aa;
}

.c-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}

在以下各节中，我们将讨论您可以在项目中使用的按钮的不同样式和类型。

图标按钮


有时您需要一个按钮才能具有特定的图标。为了突出显示按钮或更好地告知用户按钮的角色，这可能是必需的。残障用户可以使用图标按钮，这一点很重要。




图标按钮的示例在上图中，有图标按钮。下面的代码显示了添加到图标的属性aria-hidden，该属性允许您从辅助功能树中将其删除。我还添加了一个属性，focusable="false"以防止图标在IE中获得焦点。

请注意，我使用的样式vertical-align: middle使图标和按钮的内容垂直对齐。

以下是相关按钮的HTML代码：

<button class="c-button">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
    Add to fav
  </button>

这是样式代码：

.c-button svg {
    display: inline-block;
    vertical-align: middle;
    fill: #fff;
    width: 20px;
    height: 20px;
    margin-right: 0.25rem;
}

我们刚刚检查的内容可以起作用，直到我们决定隐藏按钮的文本并将其设置为仅包含图标的按钮为止。怎么做？首先，您需要将文本包装在例如element中span。然后，您可以进一步改善按钮的外观。这是按钮的HTML描述：

<button class="c-button c-button--icon">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
    <span>Add to fav</span>
  </button>

似乎现在只需要隐藏元素span就可以完成工作：

.c-button--icon span {
    display: none;
}

尽管使用这种方法，文本消失了，图标仍然保留，但是就内容的可访问性而言，这是非常糟糕的。该按钮不再对屏幕阅读器“可见”。例如，macOS上的VoiceOver报告说这样的按钮只是一个“按钮”，没有任何详细信息。有几种解决方案。

使用SVG图标


我更喜欢使用SVG图标。建议将所有图形元素的SVG描述收集到一个文件中，并<svg>使用该元素在标记中包含每个图标<use>。这是一个例子：

<svg class="c-icon" width="32" height="32" viewBox="0 0 20 20">
    <use xlink:href="icons.svg#facebook"></use>
</svg>

这是SVG图标的代码，其描述存储在文件中icons.svg并具有标识符#facebook。这种方法减少了代码重复。

▍带图标的尺寸按钮


由于按钮文本不再可见，并且为按钮设置了CSS属性，因此按钮min-width的宽度将不对应于图标的大小。为了考虑到此功能，最好显式设置图标按钮的宽度。


设置了最小宽度CSS属性的按钮和未设置此属性的按钮

.c-button--icon {
  min-width: initial;
  text-align: center;
  padding: 10px 14px;
}

▍视觉隐藏文字


使用流行类的元素.sr-only可以通过将其从屏幕上移除而在视觉上隐藏，但仍可供屏幕阅读器使用。

这是HTML代码：

<button class="c-button c-button--icon">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
    <span class="sr-only">Add to fav</span>
  </button>

以下是样式：

.sr-only {
  border: 0; 
  clip: rect(0 0 0 0); 
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

▍将字体大小设置为0


如果将属性font-size设置为value 0，则该元素span将完全不占用任何屏幕空间。也就是说，它将被隐藏。

.c-button--icon span {
    font-size: 0;
}

但是在这里，我倾向于使用类的解决方案.sr-only。在我看来，它看起来更合乎逻辑。在我看来，通过将字体大小设置为0来隐藏文本的方法看起来像一种黑客。

ariaaria标签属性的使用


如果按钮中没有元素<span>，那么必须有一种方法来消除它。一种这样的方法是使用属性aria-label。该属性要么分配给元素本身<button>，要么分配给元素<svg>。

<button class="c-button c-button--icon" aria-label="Add to fav">
    <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"><!--    --></svg>
  </button>

如果您想了解更多有关带有图标的按钮的信息，请查看此材料。

包含多行文本的按钮


在某些情况下，按钮可能需要包含两行文本。这种按钮的示例如下所示。


包含两行文本

的按钮这是用于订阅表单的按钮，其中包含主文本和辅助文本。如何制作这样的按钮，同时又不忘让残疾人使用它？以下是相关的HTML：

<button class="c-button">
    <span>Subscribe to our newsletter</span>
    <span>240K+ subscribers</span>
</button>

屏幕阅读器将为“订阅我们的时事通讯240K +订阅者”“发出声音”此按钮。当用户听到此消息时，这可能会使他感到困惑，因为没有东西会将显示在按钮上的两行文本分开。查看Chrome工具的屏幕截图，以检查项目的可用性。


探索Chrome中元素的可用性

为了不引起用户混淆，我希望对屏幕阅读器隐藏第二行文本。您可以通过使用aria-hidden相应元素中的属性来执行此操作<span>：

<button class="c-button">
    <span>Subscribe to our newsletter</span>
    <span aria-hidden="true">240K+ subscribers</span>
</button>

如果由于某种原因您无法更改HTML标记，则可以使用另一种方法向按钮添加其他文本。我在Smashing Magazine网站上找到了解决此问题的有趣方法。它包括使用伪元素放置内容。通过这种方法，屏幕阅读器不会看到任何多余的东西。这是此解决方案的CSS：

.c-button--multiple span:after {
    content: "240K+ subscribers";
    display: block;
    font-weight: 400;
    margin-top: 0.25rem;
}

链接（<a>）还是按钮（<button>）？


什么时候使用链接，什么时候使用按钮？首先，让我们谈谈它们之间的区别。

▍链接


标记<a>是一个超链接，它使您可以转到网站的另一页或转到用户查看的页面的特定部分。与标签一起<a>，你可以利用这四个伪：:hover，:focus，:active和:visited。如果从可访问性角度考虑链接，那么必须说您可以使用Enter键盘上的键与它们进行交互。链接带有语音和屏幕阅读器。

▍按钮


元素<button type="button">本身没有连接JavaScript代码就不会执行任何操作。您可以使用伪类吧:hover，:focus和:active。如果我们谈论辅助功能，那么您可以使用键盘键Enter和来与按钮交互。屏幕阅读器“读取”按钮的内容。

如果我们回想起这种设计，则可能是网页包含样式相同的按钮，但用于描述按钮的HTML代码却有所不同。考虑到这一点，.c-button必须编写用于样式化类的CSS代码，以便可以将其用于elements <button>和elements <a>。考虑以下示例。


使用链接和按钮

请注意，页面上的“按钮”的样式相同。但是，它们中的第一个实际上是一个element<a>，第二个是element<button>。这意味着按钮不一定看起来像HTML中的元素<button>。

样式有两个补充.c-button。这些是属性text-decoration: none;和text-align: center;。默认情况下，链接的文本带有下划线，因此我们想通过对使用的类进行样式化来对此进行更改。此外，在使用HTML元素（而不是用来描述按钮）的情况下，将按钮内容居中很重要<button>。

.c-button {
    /*   */
    /*     */
    text-decoration: none;
    text-align: center;
}

button <button>元素不必看起来像一个按钮


我喜欢这个示例，其中考虑到内容可访问性的要求，实施了“手风琴”面板。最初，假设JavaScript不可用，标记呈现结果如下所示。


JavaScript不可用

时的页面材料以下是此类标记的HTML代码：

<div class="accordion" data-aria-accordion>
  <h2 data-aria-accordion-heading>Heading of my panel</font></h2>
  <div data-aria-accordion-panel>
    <p>Content goes here</p>
  </div>
</div>

如果有JavaScript，则上述标记将描述可以折叠和展开的元素。这是通过创建按钮并将其添加到元素中来实现的<h2>。


在JavaScript功能可用的

情况下的页面材料在这种情况下，可以说使用元素<button>是正确的选择，因为按钮解决了文本块的扩展和折叠问题。

▍启动按钮


假设我们有一个文件。我们需要描述一个下载链接。应该使用哪个元素来解决此问题？这里有一个链接可以帮助我们！如果将属性添加到链接download，单击该属性将启动相关材料的下载。


下载按钮的链接，设计为按钮

这里是此链接的代码：

<a href="rtl-101.pdf" download>Download PDF</a>

通过这种方法，我们可以使用一个链接，该链接被样式化为一个按钮，该链接仅使用语义HTML结构来完成其工作。

行程按钮



将鼠标悬停在其上时，常规按钮将变成带有笔触

的按钮。哪种方法最适合实现按钮外观的类似更改？对于初学者，按钮样式应包括一个border默认情况下使用透明颜色的属性。通过提供这样的属性，我们确保将鼠标悬停在按钮的边框上时不会重绘。

.c-button {
    border: 2px solid transparent;
    /*   */
}

.c-button:hover {
    background: transparent;
    color: #222;
    border-color: #4676d7;
}

由于采用了这种方法，我们可以使用一个按钮，当您将鼠标悬停在其周围时，将显示其边框。在这种情况下，按钮的背景变为透明。

渐变按钮


在撰写有关定位元素的文章时，我需要一个带有渐变填充的按钮。

我需要类似于下图的内容。


渐变按钮及其带有笔触的变体按钮

有两个选项-渐变按钮和带有笔触的按钮。为了实现按钮的这种外观，我需要基本（渐变）按钮具有透明边框。仅在带有笔触的按钮上显示此边框。

.c-button {
      display: inline-block;
      color: #fff;
      background: linear-gradient(to bottom, #00acee, #0072e0);
      font-size: 18px;
      font-weight: 500;
      padding: 12px 26px;
      border-radius: 100px;
      /*  ,          */
      border: 3px solid transparent;
      text-decoration: none;
}

.c-button--outline {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

这里的一切似乎都是合理的，但是在工作过程中我遇到了一个奇怪的问题。我什至试图通过向 Twitter用户寻求帮助来解决问题。下图显示了此问题。


常规按钮，带有渐变的按钮（边框实际上是透明的；仅出于彩色目的而显示），带有奇怪边缘的按钮

现在，我们已经弄清楚了带有透明边框的渐变按钮的外观，让我告诉您上述怪异的原因。

每个元素都有一个background-origin定义墙纸位置区域的属性，该属性设置为默认值padding-box。通过这种方法，可以选择渐变的大小，使其与元素的大小匹配，并考虑边界的厚度。

我试图在按钮上添加宽边框，以观察会发生什么。请注意渐变如何重复，并且渐变的大小与padding按钮的属性匹配。


具有宽边框和渐变的按钮。

要解决此问题，必须使用样式设置背景图片的定位区域background-origin: border-box;，并将默认值更改padding-box为border-box：

.c-button {
      /*   */
      background-origin: border-box;
}

现在，如果您想尝试，请使用CodePen上的示例。

哪个更好-高度还是填充？


每个按钮都有一个高度。您可以通过显式设置按钮的属性height或padding为按钮的顶部和底部设置属性来控制按钮的高度。请注意，我们将在下面讨论的问题主要针对元素<a>。

▍固定高度


假设我们有一个样式如下的按钮：

.c-button {
    /*   */
    min-width: 120px;
    height: 45px;
}

使用这种方法，文本不会居中。看起来就像下面的一样。


按钮，其文本未居中对齐

为了解决此问题并对齐文本，您可以使用属性padding或属性line-height。通过将其设置line-height为等于或接近按钮高度的值，我们可以将文本居中对齐。

.c-button {
    /*   */
    min-width: 120px;
    height: 45px;
    line-height: 45px;
}

但是这种方法有缺点：

  • 不保证按钮文本将始终正确居中。如果更改字体，其对齐方式可能会中断。
  • 增加属性指定的值时font-size，需要为属性选择一个新值line-height。
  • line-height 对于以不同语言显示的文本，该属性可能会有所不同。对于多语言站点，这是正确的。
  • 如果有两行文本的按钮，则此方法不适用于对齐按钮的内容。

▍垂直缩进


如果为padding-top和属性设置相同的值padding-bottom，则期望按钮的内容居中。事情是这样的？实际上，这取决于具体情况。

有些字体居中很好。有些人的行为有所不同。有时，要实现这一目标，需要稍微改变垂直压痕的值之一。看看下一个按钮。


尝试将按钮文本居中

这是样式化此按钮的CSS代码：

.c-button {
    /*   */
    min-width: 120px;
    padding: 16px 14px;
}

在这种情况下，按钮的内容看起来略有偏差。上缩进的值应略微减小：

.c-button {
    /*   */
    min-width: 120px;
    padding: 14px 14px 16px 14px; /* ,  , ,   */
}

将按钮内容包装在<span>标记中


在实验过程中，我发现Adobe按钮文本的对齐方式有点混乱。这是它的外观。


我居中地敲了一下，

我检查了这些按钮，发现一个有趣的图案。内容被包装在一个元素中，该元素<span>指示按钮的固定高度。

<button class="c-button-adobe">
    <span>Save Changes</span>
</button>

对于<button>元素<span>，默认情况下，元素居中。当高度发生变化时，内容将自动居中，而无需属性padding或其他任何内容。这是此行为的动画演示。


更改按钮的高度并自动将其内容居中

确实，如果我们在谈论看起来像按钮的链接，则<span>需要将元素居中。为了考虑这一特征，可以使用布置元素的方法flexbox。

.c-button {
    /*   */
    display: inline-flex; *To keep the button inline, and flex container at the same time*
    align-items: center;
    justify-content: center;
}

就这样。我想指出，这个文章写这个部分的时候帮助了我。

flexbox或网格容器中的按钮


在这里，您可能对按钮与flex和grid布局有什么疑问。让我澄清一下这个问题。

我参与了一个项目的一部分。我需要将其内容垂直居中。所以我使用了flex布局：

.c-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

我所做的有点令人惊讶。


使用flex布局的结果

默认情况下，每个flex元素都在父元素的宽度内拉伸。这正是上图中显示的按钮发生的情况。为了避免这种麻烦，您需要配置属性align-self：

.c-button {
    /*   */
    align-self: flex-start;
}

这就是按钮的外观。


该按钮看起来更好

，将按钮放置在默认情况下设置了属性的flex容器中时，会出现另一个常见问题flex-direction: row。按钮的高度将被调整为父元素的高度。为了解决此问题，您需要使用buttonalign-self属性或flex container属性align-items。


高度拉伸的按钮

这是CSS：

.c-button {
    align-self: center;
}

通过设置按钮相对于容器中心的对齐方式，我们解决了这个问题。这就是同一示例的外观。


解决按钮拉长的问题

使用em单位


度量单位em可用于正确配置按钮尺寸。在这种情况下，此度量单位非常有用。单位em等于font-size元素（px或rem）。看下面的例子：

.element {
    font-size: 16px;
    padding: 0.5em;
}

在这种情况下，padding的值等于16 * 0.5 px。

假定项目使用三种尺寸的按钮：常规，中型和大型。当指定值padding，width，height，margin测量使用的单位em，它可以让你创建一个按钮，其尺寸是很容易改变。这是它的外观。


不同大小的按钮，

但这是使用度量单位的CSS代码的片段em：

.c-button {
  /*   */
  font-size: 1rem;
  min-width: 6.25em;
  border-radius: 0.3125em;
  padding: 0.625em 1em;
}

.c-button svg {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.25em;
}

对于不同类型的按钮，您需要创建指定不同字体大小的类：

.c-button--md {
  font-size: 22px;
}

.c-button--lg {
  font-size: 30px;
}

→ 这是在CodePen上使用类似按钮的示例

→ 这是我有关此主题的文章。我建议您阅读

动画和转场


为了使用户使用页面更加愉快，将鼠标悬停在按钮上时，请考虑使用过渡。最简单的方法是组织背景颜色更改。这是 CodePen上的示例，您可以在其中看到此想法的实现。

摘要


我对此材料感到非常高兴。我花了一年多的时间写它。我很高兴它终于出版了。希望您在这里找到对您有用的东西。

亲爱的读者们！您是否知道使用本文不讨论的按钮的任何有用方法？

More articles:


All Articles