按钮样式的正确方式

2018-05-27 admin

如果你正在建立一个网站或一个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;
}

我们最终得到的按钮是类似普通文本的。

clipboard.png

这种方法的缺点是,现在我们必须对所有按钮进行样式设置,否则用户将无法识别它们。 另一个选择是使用这种风格作为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;
}

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

clipboard.png

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

悬停(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键在按钮之间导航:

clipboard.png

处理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未能加载),则会中断焦点样式。

关注我的微信公众号,更多优质文章定时推送 clipboard.png

原文链接:https://segmentfault.com/a/1190000015044772

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33065.html

文章标题:按钮样式的正确方式

相关文章
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
回到顶部