按钮样式的正确方式

按钮样式的正确方式

若是你正在创建一个网站或一个web应用，你可能会用到按钮，也许看起来像按钮的连接。无论怎样，让这些正常展现是很重要的。

在本教程中，咱们将为<a>和<button>元素以及一个自定义.btn的CSS组件建立基本样式。 你会在这个过程的每一步中找到一个演示页面。

重置<button>样式

一般，网站或应用程序中可点击事件的99.9％的元素应该是<a>或<button>元素。 若是您不肯定在给定状况下使用什么元素：

1. 若是它转到其余网址或更改了网页的大部份内容，请使用连接（<a href="some_url"> ... </a>）。
2. 不然，请使用通用按钮（<button type =“button”> ... </ button>）。

使用正确的元素有几个优势：它对搜索引擎友好（尤为是连接！），它适用于键盘导航，它提升了全部用户的可访问性。

尽管如此，开发人员不多使用<button>元素。 在整个Web上，咱们能够看到不少触发JavaScript操做的按钮，仔细检查后发现它们是用<div>，<span>或<a>编码的。

为何<button>元素如此不受待见？

• 知识点：许多开发人员不知道它（学习100+HTML元素须要一点时间）。
• 样式上：<button>附带复杂的默认样式，这可能很难实现自定义外观。

幸运的是，样式部分能够北修复！

/**
 * Reset button styles.
 * It takes a bit of work to achieve a neutral look.
 */
button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  /* show a hand cursor on hover; some argue that we
  should keep the default arrow cursor for buttons */
  cursor: pointer;
}

咱们最终获得的按钮是相似普通文本的。

这种方法的缺点是，如今咱们必须对全部按钮进行样式设置，不然用户将没法识别它们。 另外一个选择是使用这种风格做为mixin（使用Sass或其余预处理器）并选择性地应用它：

@mixin button-reset {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

.my-custom-button {
  @include button-reset;
  padding: 10px;
  background-color: skyblue;
}

<button type="button">
  I use default browser styles
</button>

<button type="button" class="my-custom-button">
  And I’m using custom styles instead
</button>

编写一个“button”CSS组件

如今咱们已经删除了默认样式，让咱们定义咱们本身的按钮样式。 这是咱们想要作的事情：

• 可应用于连接或按钮的“按钮”样式;
• 咱们但愿有选择地应用它，由于咱们的页面中会有其余连接和按钮样式。

这须要一个CSS组件。 CSS组件是一种风格或样式集合，咱们可使用类来应用，一般在几种不一样类型的HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架中的这个概念。

咱们将这个组件称为.btn（就像Bootstrap同样，但咱们只设置颜色和大小，以保持简单）。

.btn {
  /* default for <button>, but useful for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* invisible border (will be colored on hover/focus) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* size comes from text & padding (no width/height) */
  padding: 0.5em 1em;

  /* make sure colors have enough contrast! */
  color: #ffffff;
  background-color: #9555af;
}

如下是咱们的按钮组件的外观：

你可能想知道为何差异这么明显。第二行按钮看起来就不错，谁不喜欢柔和的外观？

悬停(hover)，焦点(focus)和活动(active)样式

很酷，你的按钮看起来不错，可是...用户将与它进行交互，而且当按钮的状态改变时，他们须要视觉反馈。

浏览器为“focus”和“active”（即按下）状态设置了默认样式，但经过重置按钮样式咱们已经删除了其中的一些。 咱们还但愿为鼠标悬停设置样式，整体而言，咱们但愿可见的样式与咱们的设计相匹配。

让咱们从如下主题开始：活动状态，即按钮或者连接被点击：

/* old-school "down" effect on clic + color tweak */
.btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}

咱们能够更改按钮的颜色，但我想为咱们的鼠标悬停式样保留这种效果：

/* inverse colors on mouse-over */
.btn:hover {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}

如今让咱们添加一些焦点样式。 您的网站或网络应用程序的用户可使用键盘或虚拟键盘（在iOS和Android上）“”并激活表单域，按钮，连接和其余交互元素。

• 对于一些用户来讲，它能够加速缓慢的交互，好比填写表单。
• 对于其余人来讲，使用鼠标或触摸指针是不可能的或困难的。 他们依靠使用键盘或专用设备访问网站。

在我见过的大多数Web项目中，设计师都指定了预期的鼠标移过样式，但未指定焦点样式。 咱们应该作什么？ 一个简单的解决方案是重用：hover风格做为咱们的focus风格：

/* inverse colors on mouse-over and focus */
.btn:hover,
.btn:focus {
  color: #9555af;
  border-color: currentColor;
  background-color: white;
}

一旦你有了这种可见的对焦风格（而不是以前！），你可能想要删除浏览器的按钮的默认样式：

.btn {
  /* ... */
  /* all browsers: remove the default outline since
      we are rolling our own focus styles */
  outline: none;
}

/* Firefox: removes the inner border shown on focus */
.btn::-moz-focus-inner {
  border: none;
}

在这里尝试一下; 若是您在桌面计算机上，请使用Tab和Shift + Tab键在按钮之间导航：

处理focus样式

还有一个棘手的问题。 在多个浏览器中，当您单击连接或按钮时，将应用两个伪类：

• :active
• :focus

一旦中止按下鼠标按钮或触控板，“active”伪类就会中止应用。 但在某些浏览器中，focus样式会一直保留，直到用户点击页面上的其余内容为止。

在个人测试中，受影响的浏览器包括Chrome（66），Edge（16）和Firefox（60，仅用于连接）。 Safari（11.1）彷佛更聪明并避免了这个问题。

咱们可使用新的： :focus-visible伪类（草稿规范）来解决此问题。 这个功能尚未彻底指定，但想法是浏览器只能在键盘或相似键盘的交互以后设置： :focus-visible，而不是点击。

因为它还没有被浏览器实现，咱们将不得不使用JavaScript实现，好比有些polyfill。 它在整个页面上运行，而且仅在使用键盘时才将焦点可见的类设置为接收焦点的元素。

让咱们改变咱们的样式来解耦：hover和：focus样式：

/* inverse colors on hover */
.btn:hover {
  color: #9050AA;
  border-color: currentColor;
  background-color: white;
}

/* make sure we have a visible focus ring */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
    0 0 0 1.5px rgba(255, 105, 180, 0.5);
}

如今，在咱们的页面中包含focus-visible.js脚本后，它会为<body>元素添加一个js-focus-visible类。 咱们可使用它来从没有焦点可见类的焦点元素中移除焦点样式：

/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
  box-shadow: none;
}

一个更简单的解决方案是只为focus-visible类声明焦点样式，但若是polyfill不是活动的（例如，若是咱们的JS未能加载），则会中断焦点样式。

关注个人微信公众号，更多优质文章定时推送