FE(0x01)--前端吗？我需要一个按钮
以业务为核心驱动未来，思考前端零部件之按钮
思考了下，我还是觉得把button换成按钮吧！标题才显得有意义，先卖个关子，后面我再讲为啥。FE的全称就是Front end,所以这个题材是写前端的，但并不是以技术作为切入点，而是以业务为思考，立足于实践，颗粒化一张张网页的零部件作为切入点，后面的学习都会以这种打法呈现，为此我还准备了一个梗，请看楼下：
好啦，梗归梗，我们下面进入今天的主题，对一张网页中按钮的思考。
这个是本文的目录结构
一、按钮起源
这是一张最原始的网页，里面有不添加任何CSS防腐剂的html中的button标签、input标签以及a链接标签。可以看到，他们长得怎么样啊？都很搓，毫无美感！但在那个时代都很实用。
特征值提取：从中我们大致发现了，button和input标签生出来的按钮都长得无差别除了文件上传和颜色选择，你文字有多长，它就多长，四周略微有些空隙，a链接与楼上两位相比，少了个框，但是有条下划线，点击后会变红，看到这里我们大致对上古时代网页的一些元素有了初步的认识。
二、按钮中的css
网页中，html是骨架，css是化妆师，JavaScript是动作指导。所以在css里你大致能够看到一些很炫酷的特效，这个时候的按钮可以说是“貌美如花”啊，下面就从时间主线上带大家一起来看看“如花”们。
2.1、按钮1.0
这个1.0时代有个很鲜明的特征就是，带有浓郁的外框感，就怕别人不知道你是个按钮，和win7那种UI差不多吧。根据其类别的话，这边分为文字的、图片的、文字加图片的吧，其形状也多姿多彩。
下面就带着大家一起来做一下，首先，我们不可能每写一个按钮就写一次按钮的css，所以我们需要把他们的共同部分抽离出来，作为一个公共类，总结了下，大致需要楼下这几个：
- width: 按钮的宽度，为了方便演示，这边统一设置了按钮的宽度，如果默认不设置的话，就会按里面的内容撑开
- line-height: 行高，这里你有没有疑惑，为什么ataola不用height而是line-height，这个放到最后最后问题思考解答
- margin: 外边距，这个就是兄弟元素的距离
- padding: 内边距，这个是父子元素的距离
- text-align: 文字对齐方式，一个按钮肯定是居中会漂亮点
- color:颜色，里面元素的颜色，这里为什么不设置background-color呢？留在问题思考解答
- font-weight: 字重，默认字体太挫，给它加点沉重
- border-raidus: 边框弧度，按钮么有点弧度会好看点。
- overflow: 因为我们在这里设置了width，所以我们不太期望当里面的内容超过按钮时把它显示出来，所以要这么处理。
- text-shadow、box-shadow:给它加之一个阴影的效果 那么我们大致可以得到一个按钮的类如下:
.btn {
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
border-radius: 5px;
margin: 0 20px 20px 0;
padding: 2px;
overflow: hidden;
}效果如下：
如果你细心观察，你就会发现，它默认是有一个我点了”如花一“一下，它外面有一个很挫的带不和谐色的框，如果这里是个圆的话，那么你点击就会有很不漂亮也不期望出现的蓝色框，这里我们通过outline:none把它去掉。这样子看起来如花就稍微有点标致了。
这里我们给它设置了一个border-radius: 5px, 它会有一个弧度的产生，这里的border-radius你可以往大了再设置，如果你想象力还可以的话，你应该能猜到，”如花“会由矩形变椭圆再变圆。
注意哦，这里没用到box-shadow就有一个右边和下边阴影的效果，这个是它默认的一些样式所引起的。
到了这里，我们差不多具备了人造”如花“的能力，但是”如花“她不可能不穿衣服对吧，也不可能每天都穿这么一件单薄的衣服是吧！我们要的”如花“是如花似玉的、五彩斑斓的，是美的。那么，我们自然而然地会去根据不同的业务场景设计其对应的衣服对吧。”红橙黄绿青蓝紫“数数颜色有七道，这里我们以绿色（俗称原谅色）、红色、黄色、蓝色来分别我们楼上的四朵”如花“。
这里如果是单一色，那其实挑战性也不到，我们要做的稍微和谐一点，用到它的border，background和box-shadow属性，并对如花的后两个属性渐变。
对应的部分css如下：
.green {
border: 1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top, #90dfa2, #84d494);
background: -moz-linear-gradient(top, #90dfa2, #84d494);
background: linear-gradient(top, #90dfa2, #84d494);
}
// 其他的请以此类推......效果图如下：
看效果可还行，但是当你鼠标移到它这个上面没有效果，这里涉及到一个cursor属性和hover伪类的知识点，这里就简单意思下我点了，具体的对应部分css如下：
.btn {
...
cursor: pointer;
}
.btn:hover {
font-size: 18px;
}效果如下：
然后我们试着在按钮里面加个图片，可以看到默认背景图是撑不开这个按钮的，然后如果你没有文字内容也是撑不开的，具体的css如下：
.img {
background: url('./img/local.png') no-repeat 2px;
}效果如下：
至此我们差不多，完成了按钮1.0的知识储备。
2.2、按钮2.0
按钮2.0时代的鲜明特征是，以Bootstrap(你也找不出其他的啊)为典型代表的响应式框架，这个时候已经不太需要你自己去写Button了，已经有上古程序员的祖传代码啦，你需要做的就是，引入相应的类库，贴上相应的类，微调就差不多了。
Bootstrap的核心就是网格布局，你可以写一套代码兼容PC和移动端，其他的倒不是很占优势。那么去学习它的话，我个人认为看书和看网站的demo都是不正确的，你看了半天可能后面又忘了，那么多的类库哪记得住啊，这个是非常想不开的做法，就像我前段时间去研究百度地图定位，也是看了一遍API，隔了一两个月我又记不住了，后来我就不这么干了，一切围绕着一个点打，那就是”业务“，以业务为核心展开，你需要什么就去官网贴什么，这样子效率会高一点。
部分代码如下：
<a class="btn btn-default" href="#" role="button">（默认样式）Default</a>
<button type="button" class="btn btn-default">（默认样式）Default</button>
<input class="btn btn-default" type="button" value="（默认样式）Default" />其效果如图所示：
这里我们可以看到a链接、input和button创建的按钮长得都差不多，这很显然是我不期望看到的，因为这会引发我的选择恐惧症，到底选”如花一“好还是”如花二“好还是”如花三“好呢？这就是文章开头我为什么不直接写Button而写按钮的原因，关于这三者的问题，我们在后面的问题思考里进行介绍，这里不作展开了。
看到这里，后面都是用button来介绍了，分别从尺寸、激活状态、禁用状态来介绍下。
尺寸: 如图所示，分别加btn-lg、btn-sm、btn-xs查看，当然你也可以选择不加，如果想跟父元素一样的话宽度，那么btn-block你可以考虑下。
激活与禁用状态： 当按钮处于激活状态时，其表现为被按压下去（底色更深、边框颜色更深、向内投射阴影），加active或者disabled类。
至此我们有关按钮2.0的知识储备已经讲完。
2.3、按钮3.0
按钮3.0的特征是，趋于平面化扁平化的UI。典型的代表例子是layui
基础类和尺寸： 图中的字母就是所对应的类名
值得一提的是，layui的图文结合按钮不错哟，这里直接贴官网的例子。
日常开发图标可以去看下：https://www.layui.com/doc/element/icon.html
2.4、游离在按钮3界之外的纽
前面讲的基本上是绝大部分开发涉及到的，上升空间很小，这里涉及到的3D按钮和动画按钮有很大的成长空间，关于他们的用途，例如3D的可以在虚拟仿真、教学设备演示的时候用，动画的可以在部门招新、活动页等等。
2.4.1、3D按钮
我们知道，平面里面想要的到3D的效果，那么阴影是必不可少的，所以这里涉及到box-shadow属性，这样子我们看上去它长得像3D，紧接着我们期望我们点击它的时候有一个区别于原始状态的效果，这里的话就是按钮有个下压的感觉。通过设置box-shadow我们可以让它的阴影变小，这样子似乎符合预期，但是你的按钮元素的主体并没有一个下压的效果，这里需要一个平移Y轴的属性transform:translateY(),然后我们区分下active伪类和hover伪类的区别，当你鼠标凑上去，hover会有反应，当你鼠标点击下去active会有反应，如下：
代码就不贴了，具体的可以参见：https://www.runoob.com/css3/css3-buttons.html
2.4.2、动画按钮
动画的话，这里就涉及到css3的transition过渡了，这里列举一个按钮的代码如下：
.btn-outline {
font-weight: bold;
background-color: #ffffff;
border-style: solid;
border-width: 3px;
padding: 0;
outline: 0;
display: inline-flex;
overflow: hidden;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.btn-outline i,
.btn-outline span {
width: 100%;
display: block;
padding: 0.7rem;
margin: 0;
box-sizing: border-box;
flex-shrink: 0;
}
.btn-outline i {
margin-left: -100%;
transition: margin-left 300ms ease-in-out;
}
.btn-outline:hover {
color: #ffffff;
background-color: #404040;
}
.btn-outline:hover i {
margin-left: 0;
}
.btn-outline.default {
color: #404040;
border-color: #404040;
}
.btn-outline.default:hover {
color: #ffffff;
background-color: #404040;
}
.btn-outline.default:focus {
box-shadow: 0 0 0 0.3rem rgba(64, 64, 64, 0.7);
}最终预期的效果是：
如果需要学习一下的话，看这个一个疗程就了：https://www.runoob.com/css3/css3-buttons.html
2.5、常用按钮色调
这个是我收集整理的按钮颜色表，供参考。
三、按钮中的JavaScript
这里我们思考这样一个问题，按钮在一张网页中扮演的角色是什么？我的答案是触发控制器。从根本上它控制了用户与后台交互的CRUD(增、删、改、查)以及前台的一些特效。
"从逻辑上思考网页都是写给用户看的！程序员眼中没啥网页，有接口就行了。"，绝大多数用户都不会直接请求接口去做符合预期的事情，因此我们需要这样一种客观实在的“如花”去打通这层隔膜。
3.1、传统表单类按钮
在没有Ajax之前，我们跟后台交互是不是只能通过form，form决定了你的提交地址，提交方式。然后button去反应你的积极性。
<form action="/ximalaya", method="POST">
...
<button type="submit">提交</button>
</form>3.2、非传统表单类按钮
在有了Ajax之后，似乎很少看到用传统表单提交的身影，更多地是通过ajax来做这件事。而这里就会产生一个问题，在一个传统表单中，你点击了一个提交按钮，传统表单提交和Ajax提交哪个先呢？通过实践我们知道传统的表单提交会优先于AJax的提交，所以在这里我们需要做一件事，就是禁止传统表单提交,这里分享一个简单粗暴的做法.
<form action="/ximalaya", method="POST" onsubmit="return false;">
...
<button type="submit" onclick="postData()">提交</button>
</form>3.3、其他
就是按钮，我们知道很少是拿来看的，大部分是用来点击的吧。那么这个点击就会产生一个点击事件，而点击事件要小心冒泡的产生，大致是三类的处理方法。
- event.stopPropagation()方法 能阻止事件冒泡，但是其默认事件会被执行
- event.preventDefault()方法 能阻止默认事件，但是还是会冒泡
- return false ; 楼上两位的结合体，既会组织事件冒泡又会阻止默认事件
IE的话要单独拎出来说,好在它已经凉凉，了解下就好了：
window.event.cancelBubble = true;//停止冒泡
window.event.returnValue = false;//阻止事件的默认行为问题思考
1、为什么ataola在网页中设置了line-height而不是height?
简单一点说，我怕你照着抄我的结果出不来，因为你写的height有可能被瓜分像素。
其一，从按钮起源的例子中，我们得知，HTML标签元素默认都会有一些属性值，而这些会影响你的判断，那么最直白点的做法就是，在CSS文件最顶部写上楼下这句话，初学者建议这么做。
* {
margin: 0;
padding: 0;
} 其二，这里就要涉及到一个盒模型的知识，一种是IE的盒模型，一种是W3C的盒模型。具体的来说呢，就是当你选择IE盒模型，也就是box-sizing:border-box;的时候，你所设置的width和height，等于实际上网页的宽度加上padding值和broder值，而默认是border-box。当你选择box-sizing:content-box的时候，那么你所设置的width和height才等于网页实际看到的。
这里可能有的同学会这样子做：
可以是可以，想法很好，这说明你在写一些ui、li的例子的时候，掌握了垂直居中的一种渐变方法，但在这里还是会达不到预期，因为还是其一的那点，默认样式会产生干扰,可以看到楼上的并没有
你可以设置padding: 0;border: 0;，但是我不推荐你这么做，所以综上所述，我推荐你设置line-height就好了，行高就是这一行的高度。
2、为什么ataola在公共类btn中，只设置了color，没有设置background-color？
是这样子的，我们知道，大部分按钮的文字颜色基本一致，但是背景颜色却各有不同，这里是找共性，所以我们不需要设置background-color，到某个具体类的时候再设置，这样子会不会更合理一些呢。
3、回到我们最开始的那张图，ataola为什么要把input、button、a标签归为一类，根据现实业务场景该如何选择？
从开始的那张图我们可以知道，input和button都可以设置成button，但是a链接不可以，所以自然而然的，原生HTML中button的属性a链接都不具备，所以disable="disabled"这个a链接是不可以的，当然可能后期你给它加JavaScript代码或者css代码也能实现这个效果，但毫无意义，也就是说，我们可以认为，a链接只是长得像，并通过其一些属性，也能够执行一些JavaScript业务逻辑。a链接只能通过增加类来实现例如active效果，但是button天然会，用伪类:active.
官方文档中指出，链接被作为按钮使用并用于在当前页面触发某些功能时， 那么，务必为其设置 role="button" 属性。Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。
emmmm,给a链接加一个这个类的选择吧，这样看上去a链接就在使用上比较完美了。
.disabled {
opacity: 0.6;
cursor: not-allowed;
}4、通过查看bootstrap源码，看到button的样式有何心得体会？
其中，有这几个样式，引起了我的注意，除此之外，他们的border + padding + 它的高度等于38px，而button的高度统一的是24px;
.btn {
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
}倒不是因为rem，而是为啥数值要这样组合，但这里还是提一下rem吧。
rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比，为了做移动端兼容的。
父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height
reboot.scss
body {
...
font-size: 1rem;
line-height: 1.5;
}从这里我们大致可以得到行高 16 * 1.5 = 24px;，然后根据楼上的继承，我们大致可以知道，按钮的行高是24px；padding-top和padding-bottom的和16 *0.375 * 2 = 12px; 然后border是1px，所以最后总数算出来就是24 + 12 + 1 * 2 =38。
5、留一个问题，去实现一个动态渐变色按钮！
几个可以定制按钮的工具网站：
千图网网页工具： http://tool.58pic.com/anniushengcheng/
猿工具：http://www.yuangongju.com/css3button