就是网页或应用中用来承载用户操作的元件。用来承载用户某一个具体的命令（操作），用户在按下Button后程序系统执行一系列的行为。
通常在视觉上会着重表现。
按钮是一个普通的必不可少的，几乎我们每天都要接触无数次的设计元件，同时在Web或者App上创造流畅的用户体验必不可少。
按钮 的尺寸
点击Button的是鼠标或手指。
MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间，指尖平均为8-10mm，所以最佳的热区尺寸应设定为10mmX10mm。
按钮 的形状
通常是直角矩形或者圆角矩形。直角形的按钮向我们传递一种正式严肃的感觉。圆角能够加强信息的传递，并且能够将人的视线集中在元素的中心位置。其他形状，如圆形，三角形等。
按钮 的颜色
按钮的颜色有千万种，可能考虑到界面的设计风格；考虑到对用户的心理暗示；考虑到要传达给用户的理念会选择合适的颜色。比如大众默认的红色按钮传达有警告、不可以的意思，同时也最能引起注意的颜色；蓝色则传达着可行，畅通之意；灰色则传达着不可用，不可点击之意，如灰置按钮就是这样应用的。
按钮 的样式
1.立体按钮
立体按钮样式相较于扁平按钮设计增加了一维空间，在复杂或宽裕的空间中强调功能，立体按钮比扁平按钮更加显眼。
2.扁平按钮
扁平的按钮不突出，在点击时会有背景颜色，不打扰内容。
3.开关按钮
用同一个Button表示开启和关闭，节省空间。
4.幽灵按钮
透明背景，与页面文字一样颜色，只加上边框，通常基于品牌或设计的考虑。
5.悬浮按钮
悬浮按钮用于驱动动作时使用。当然在其它场景使用并不局限于单一形状，可以是图片文字结合，也可以是icon单独构成，悬浮于页面中。
悬浮按钮也是谷歌设计的重要部分，它是一个圆形的材质按钮，点按之后按钮浮起并表现墨水晕开的效果，利用本身的圆形形状悬浮于界面之上与其他元素进行区分，加上运动动作，包括渐变，展开和转化为单一定点。
按钮 的状态
按钮有可用不可用两种状态，以及在交互上默认状态、鼠标或悬浮时的状态和按下时的状态。
之前有提到灰置按钮，就是不可用的。如下图的应用按钮，现在这种情况是不可用，不能点击的。
只有在你做出相应的改动时，这个按钮才会被唤醒，变成可用可点击的状态。
在Web中按钮的默认状态下；
鼠标悬停时是这样；
按下时是这样的。
在界面设计按钮时都要考虑到这个交互问题，承现三种不同状态。
按钮 的构成形式
按钮可以分为纯文字的、纯icon的，纯图片的以及这三种元素各自相结合的，最常见的就是纯文字形、纯icon形和文字icon结合形，纯文字的太常见，就不用再例图说明了。
按钮 的使用形式
单个 按钮 ，最常见的。
按钮组 ，一般成组出现，共用边框，在视觉上成一个整体长条形状。末尾可能有更多的按钮隐藏，通过下拉箭头表示。
列表型 按钮 ，类似Select，从可选的列表中选择一项或者多项的菜单。
按钮 的摆放位置
按钮应放置在用户能够直接找到或者他有预期能看到的地方。例如,iOS UI 设计规范给明了按钮的合理位置。
按钮要执行的命令和位置的关系非常重要，,特别是在出现成对的选项时(就像”上一个”和”下一个”)，确保设计强调了最主要或者最重要的动作。
在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作，并且，主要动作不但可以通过颜色和对比度去引起注意，还可以看它是否置于对话段落的右边。
给按钮添加css样式的方法：
添加方法：
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid右边线
2、PADDING-RIGHT: 2px内边距 右
3、BORDER-TOP: #7b9ebd 1px solid上边线
4、PADDING-LEFT: 2px内边距 左
5、FONT-SIZE: 12px文字大小
6、BORDER-LEFT: #7b9ebd 1px solid左边线
7、CURSOR: hand鼠标移上去时，变成手形。
8、COLOR: black颜色黑 （表示文字颜色）
9、PADDING-TOP: 2px内边距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线
扩展资料
CSS样式部分
大小 {font-size: 12px}，x-large(特大) xx-small(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique}(偏斜体) italic(斜体) normal(正常)
行高 {line-height: normal}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold}(粗体) lighter(细体) normal(正常)
变体 {font-variant: small-caps}(小型大写字母) normal(正常)
大小写 {text-transform: capitalize}(首字母大写) uppercase(大写) lowercase(小写) none(无)
修饰 {text-decoration: underline}(下划线) overline(上划线) line-through(删除线) blink(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF}
图片 {background-image: url()}
重复 {background-repeat: no-repeat}
滚动 {background-attachment: fixed}(固定) scroll(滚动)
位置 {background-position: left}(水平) top(垂直)
字间距 {letter-spacing: normal} 数值 /*这个属性有用，多实践下*/
对齐 {text-align: justify}(两端对齐) left(左对齐) right(右对齐) center(居中)
