, but useful for */
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;
}
.btn:active {
transform: translateY(1px);
filter: saturate(150%);
}
.btn:hover {
color: #9555af;
border-color: currentColor;
background-color: white;
}
/* 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;
}
-->
英文原文地址 https://fvsch.com/code/styling-buttons/
Styling buttons, the right way！
在本教程中我们将学习完成<a>和<button>的基本样式并进行css自定义
一 <button>样式重造
潜规则里，我们99%的点击事件都是<a>或<button>来承担的。如果你不清楚如何正确使用标签的话可以按下面的规矩来：
①如果即将跳转到其它页面或大幅修改当前页面的内容（ajax）就使用(<a href="some_url">…</a>).
②否则就使用(<button type="button">…</button>).
正确的使用标签有很多好处如①SEO-friendly ②方便键盘快捷键 ③用户体验更好
尽管如此，<button>标签还是被<div> <span> <a>等标签在很多情况下替代。
为什么<button>如此不被重用？
①了解程度: 许多开发者对此标签不了解(学习一下 HTML’s 100+ elements).
②样式复杂: <button> 自带复杂的默认样式,从而想获得较好的自定义样式比较困难
谢天谢地，我们可以 通过下面的代码对<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;
}
完成后<button>标签显示如普通文本
button
这种方法的缺点是，现在我们必须在所有的按钮上设置CSS样式，否则用户将无法识别它们（参见：affordance）。
@mixin button-reset {
padding:;
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样式
我们上面已经移除了默认样式，现在我们来定义自己的button样式
①“button”样式可以被用于link或是button
②让样式变的可供选择，毕竟页面会存在各种各样的样式
使用class选择符 .btn (类似bootstrap中的使用)
.btn {
/* 默认为button 但是在<a>上依然有效 */
display: inline-block;
text-align: center;
text-decoration: none;
/* 创造上下间距一定的空间 */
margin: 2px 0;
/* border透明 (当鼠标悬停时上色) */
border: solid 1px transparent;
border-radius: 4px;
/* padding大小与字体大小相关 (no width/height) */
padding: 0.5em 1em;
/* 确保字体颜色和背景色有足够区分度! */
color: #ffffff;
background-color: #9555af;
}
高对比度！ strong contrast (5.00):
避免如下！ low, inaccessible contrast (2.30):
之所要避免第二种的低对比度图像
一方面，有的人可能视力有所欠缺；另一方面，即使是视力良好的朋友在阳光下看手机等情况也无法正常阅读。
可以通过这个网站完成对比度的测试 check your contrast ratios here
三 对button的hover，focus，active状态进行区分
由于button是一个需要交互的标签，用户在对button进行操作时肯定要得到反馈
浏览器本身对focus和active有默认的样式，但是我们的重置取消了这部分样式；因此我们需要添加一部分css代码完成这部分的操作，并让button变化的状态和我们此前的样式更搭！
①:active状态
/* old-school "的button位置下移+ 颜色饱和度增加 */
.btn:active {
transform: translateY(1px);
filter: saturate(150%);
}
②我们可以改变按钮的颜色，但是我想为悬停时保留这种样式：
/* 鼠标悬停时颜色反转 */
.btn:hover {
color: #9555af;
border-color: currentColor;
background-color: white;
}
③让我们增加focus样式，用户经常会用键盘或是虚拟键盘(ios或安卓等)来focus表单，button，links和其他一些交互性组件
一方面：这样可以加快交互效率
另一方面：对有的人而言，无法使用鼠标，那么就可能依赖键盘或是其他工具访问网站
在绝大多数我见过的项目中，设计师仅仅指定mouse-over样式而没有focus样式，我们应该怎么做呢？
答案：最简单的方法就是复用hover样式给focus
/* 复用样式 */
.btn:hover,
.btn:focus {
color: #9555af;
border-color: currentColor;
background-color: white;
}
④如果要用到focus样式，那么就需要移除浏览器button默认的样式（否则当button是focus或active状态下都会有outline边框）
.btn {
/* ... */
/* all browsers: 移除默认focus样式 */
outline: none;
}
/* Firefox: 移除默认focus样式 */
.btn::-moz-focus-inner {
border: none;
}
试一试效果,如果有键盘可以尝试用tab和shift+tab进行导航从而触发focus！
Hi, I’m a link And I’m a button
四 :active和:focus同时触发的问题！！
当我们对button进行点击时，active和focus伪类同时触发，在鼠标移开后，active伪类消失，但是focus样式还在，这种时候我们就需要点击其他地方才可以消除样式，很难受！
我们发现，有一种新的伪类:focus-visible pseudo-class (draft specification).
这个特性还没有完全确定，但是这个想法很好，是指浏览器应该只在键盘或键盘式交互之后出现:focus-visible，而鼠标点击无效。
但是由于多数浏览器还没有这个新特性，所有需要借助this polyfill.
该JS保证了后相兼容性
在引入该polyfill后
/*
保留键盘触发的focus，取消鼠标触发的focus
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
} /*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step then the browser's default focus
indicator will be displayed instead.
这段我不太清楚怎么翻译，，
*/
.js-focus-visible .focus-visible {
…
}
在本项目中首先对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);
}
然后利用polyfill完成移除多余的鼠标focus效果
/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
box-shadow: none;
}
完成地址： look at the final code
只有键盘交互才会出现的focus样式！