按钮样式的正确方式

DataPipeline 发布于2019-08-29 15:31 / 2269人阅读

摘要：按钮样式的正确方式如果你正在建立一个网站或一个应用，你可能会用到按钮，也许看起来像按钮的链接。这是我们想要做的事情可应用于链接或按钮的按钮样式我们希望有选择地应用它，因为我们的页面中会有其他链接和按钮样式。

按钮样式的正确方式

如果你正在建立一个网站或一个web应用，你可能会用到按钮，也许看起来像按钮的链接。不管怎样，让这些正常展示是很重要的。

在本教程中，我们将为和 编写一个“button”CSS组件

现在我们已经删除了默认样式，让我们定义我们自己的按钮样式。这是我们想要做的事情：

可应用于链接或按钮的“按钮”样式;

我们希望有选择地应用它，因为我们的页面中会有其他链接和按钮样式。

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

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

.btn {
  /* default for

以下是我们的按钮组件的外观：

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

悬停(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脚本后，它会为元素添加一个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未能加载），则会中断焦点样式。

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

云服务器 GPU云服务器自定义按钮样式按钮样式html php 按钮样式 asp 按钮样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113372.html

HTML编码规范建议

摘要：示例强制对中规定允许省略的闭合标签，不允许省略闭合标签。示例图片强制禁止的取值为空。示例提交取消取消提交建议当使用进行表单提交时，如果条件允许，应使原生提交功能正常工作。示例建议模板代码应以保证单个标签语法的正确性为基本原则。这段时间在整理前端部分代码规范，初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理。之前已经整理完了CSS编码规范，有兴趣可以了解下 1...

sunnyxd 2019-08-01 17:02 评论0 收藏0
HTML表单（来自MDN的总结）

摘要：多个标签原生表单部件通用属性默认这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。元素的名称这是用于表单数据提交的。到目前为止，表单是最常见的攻击媒介可能发生攻击的地方。表单介绍 HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也...

JouyPub 2019-08-02 11:15 评论0 收藏0
HTML编码规范

摘要：示例强制禁止为了脚本，创建无样式信息的。示例强制对中规定允许省略的闭合标签，不允许省略闭合标签。指定字符编码的必须是的第一个直接子元素。示例提交取消取消提交建议当使用进行表单提交时，如果条件允许，应使原生提交功能正常工作。转载：原地址 1 前言 HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。 2 代码...

bang590 2019-08-01 14:43 评论0 收藏0
9：浏览器兼容

摘要：由和开发的浏览器排版引擎，年月发布。浏览器的兼容问题是我们必须去克服的。表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。 9：浏览器兼容常见的主流浏览器 1）主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的浏览器 : Mosaic ...

AWang 2019-04-23 13:33 评论0 收藏0