按钮样式的正确方式

按钮样式的正确方式

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

一旦停止按下鼠标按钮或触控板,“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


优质翻译文章
优质翻译文章

前端开发者

4.5k 声望
1.3k 粉丝
0 条评论
推荐阅读
webpack构建速度优化
使用webpack.DllPlugin优化,其实并没有优化速度,只是把一些不需要经常变更的部分提前构建,之后只需要构建变更的部分就可以了,确实优化了时间

frontoldman9阅读 2.8k评论 4

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.8k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 4k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.6k评论 2

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.1k评论 10

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.3k

封面图
妙用 CSS 动画来实现颜色加深、减淡等混合操作
欢迎关注我的公众号:前端侦探在上一篇 CSS 如何根据背景色自动切换黑白文字?中,讲述了文本自适应背景色的一些小技巧,不过还存在一定局限性,比如:如果是背景是渐变色该怎么办?很容易想到的思路是将两个渐变...

XboxYan13阅读 1.9k评论 1

封面图

前端开发者

4.5k 声望
1.3k 粉丝
宣传栏