就是网页或应用中用来承载用户操作的元件。用来承载用户某一个具体的命令（操作），用户在按下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 设计规范给明了按钮的合理位置。

按钮要执行的命令和位置的关系非常重要，,特别是在出现成对的选项时(就像”上一个”和”下一个”)，确保设计强调了最主要或者最重要的动作。

在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作，并且，主要动作不但可以通过颜色和对比度去引起注意，还可以看它是否置于对话段落的右边。

按钮能传达用户触摸它们时发生的操作。

Buttons被按时被触发墨水扩散效果。 他们可能会显示文字，图像或两者都有。 平面按钮和浮动按钮是最常用的类型。

其他按钮类型包括：

· 底部固定按钮（Persistent footer buttons） 是可用于屏幕底部或提示框的平面按钮。

· 下拉按钮（Dropdown buttons） 显示多个选择。

· 切换按钮（Toggle buttons） 将选项汇聚在一起。 图标切换允许选择或取消选择单个选项。

平面按钮Flat buttons

平面按钮是只有文本的按钮

可用在dialogs， toolbars和inline

不会有抬起的效果，但是点击时会填充颜色

浮动按钮 Raised buttons

浮动的按钮是矩形的按钮。

它们可以内联使用。

他们被点击时会抬起并触发墨水扩散效果。

海拔

平面按钮Flat buttons: 0dp

悬浮按钮 buttons: 2dp

三种标准按钮:

悬浮响应按钮（Floating action button）： 点击后会产生浮起与墨水扩散效果的圆形按钮。

浮动按钮（Raised button）： 点击后会产生浮起与墨水扩散效果的常见的方形按钮，。

扁平按钮（Flat button）：  点击后产生墨水扩散效果，但是没有浮起的效果。

选择按钮样式

选择按钮样式取决于按钮的优先级，屏幕上的组件数量和屏幕布局。

功能： 非常重要+无处不在=悬浮响应按钮（Floating action button）

海拔： 选择浮动还是平面按钮，具体取决于它所在的容器以及屏幕上有多少z轴空间图层。 屏幕上不应有太多层。

布局： 每个容器主要使用一种类型的按钮。 只有在有充分理由的情况下才能使用混合按钮类型（比如需要强调一个浮起的效果）。

按钮类型

按钮的适用类型应该与其所出现的环境相适应。

标准提示框

屏幕上的按钮对齐方式：右边

将肯定性按钮放在右侧，否定性的放在左边。

表单

屏幕上的按钮对齐：左边

将肯定性按钮放在左侧，否定性的放在右边。

卡片

按钮最好放在卡的左侧以增加其可见度。 但是，由于卡片具有灵活的布局，因此可以将按钮放置在适合内容和上下文的位置，同时保持产品内的一致性。

非标准的提示框和模态窗口

非标准提示框和模态窗口中的按钮放置取决于它们包含内容的复杂程度。

对于内容相对简单的提示框，建议将按钮放在对话框的右侧，肯定性按钮位于否定性按钮的右侧。

对于冗长或复杂的表单，建议将按钮放在表单的左侧，肯定性按钮位于否定性按钮的左侧。

版式设计

按钮文本应该用有大写的语言大写。 对于其他语言，平面按钮上的彩色文本将它们与普通文本区分开来。

无障碍

为了确保残疾人的可用性，需要按钮的高度为36dp，热区的最低高度为48dp。

圆角半径

按钮应该有一个2dp的圆角半径。

密度

当鼠标和键盘是主要的输入方法时，可以稍微减少按钮尺寸以适应密集的UI界面。

用法

平面按钮印在材料上。 不会浮起，但点击时会填充颜色。

可以在以下位置使用扁平按钮：

·在 toolbars上

·在提示框中，将按钮操作与对话框内容统一起来

·Inline, with padding，因此用户可以轻松找到它们

用法

浮动按钮增加了大部分平面布局的海拔。 强调在拥挤的或者较大的空间的功能。

浮动按钮就像一块放在另一张纸上的材料 - 点击时浮起并填充颜色。

按钮海拔

浮动按钮的默认海拔为2dp。

在桌面上，浮动按钮可以在悬停时获得此海拔。

如果app要求操作持续存在且随时可供用户使用，请考虑使用悬浮响应按钮（Floating action button）或底部固定按钮（Persistent footer buttons）。

请勿在固定按钮区域使用浮动按钮。

添加分隔后，底部固定按钮可用于滚动的提示框。

下拉按钮

下拉按钮可在多个选项中进行选择。 该按钮显示当前状态和向下箭头。 例如，可用状态可以显示为文字，颜色或icon的列表。

当用户与按钮交互时，Menus会覆盖按钮并显示可能的状态。 按下某个状态会取消Menus并更新按钮以显示此新状态。

在下拉菜单中滚动的方式与Menus滚动的方式相同。

溢出下拉菜单按钮

这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。点击菜单中的任意一个选项将会引导到对应的设置页面。

分段式下拉菜单按钮

分段式下拉菜单按钮有两个区域: 当前状态和下拉箭头。点击当前状态会触发状态相应的动作。点击下拉箭头则会弹出所有状态菜单点击任意一个状态会改变当前的状态。

可编辑分段式下拉菜单按钮

可编辑分段式下拉菜单按钮的当前状态位置是可编辑的（例如用来选择文字大小的下拉菜单）。 点击当前状态位置会触发相应的动作并且当前状态会变成可编辑。点击下拉箭头会显示所有状态。

桌面应用栏规格

切换按钮可用于分组的相关选项。 安排布局和间距来表达出切换按钮是组的一部分。

聚焦和点击状态可能会强化切换按钮是一个组的一部分。 例如，当聚焦一个切换按钮时，焦点可能会同时显示组中的其他切换按钮。

切换按钮需要：

·组中至少有三个切换按钮

·用文字，图标或两者标记按钮

建议使用以下组合：

·可以都不选

·只能选一个

·可以选多个

图标切换

图标适用于切换按钮，允许选择或取消选择单个选项，例如向项目添加或移除星标。

他们最好位于应用栏，工具栏，动作按钮或切换。

图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。

给按钮添加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(居中)