素材之经典按钮图形大全(920个)

按钮可按操作方式、防护方式分类，常见的按钮类别及特点：
开启式：适用于嵌装固定在开关板、
按钮开关（图2）
控制柜或控制台的面板上。

代号为K。

保护式：带保护外壳，可以防止内部的按钮零件受机械损伤或人触及带电部分,代号为H。

防水式：带密封的外壳，可防止雨水侵入。

代号为S。

防腐式：能防止化工腐蚀性气体的侵入。

代号为F。

防爆式：能用于含有爆炸性气体与尘埃的地方而不引起传爆，如煤矿等场所。

代号为B。

旋钮式：用手把旋转操作触点，有通断两个位置，一般为面板安装式。

代号为X。

钥匙式：用钥匙插入旋转进行操作，可防止误操作或供专人操作。

代号为Y。

紧急式：有红色大蘑菇钮头突出于外，
按钮开关（图3）
作紧急时切断电源用。

代号为J或M。

自持按钮：按钮内装有自持用电磁机构，主要用于发电厂、变电站或试验设备中，操作人员互通信号及发出指令等，一般为面板操作。

代号为Z。

带灯按钮：按钮内装有信号灯，除用于发布操作命令外，兼作信号指示，多用于控制柜、控制台的面板上。

代号为D。

组合式：多个按钮组合。

代号为E。

联锁式：多个触点互相联锁。

代号为C。

按用途和结构分类：
1、常开按钮
2、常闭按钮
3、复合按钮。

按钮开关的外形与结构图_按钮的符号
按钮通常用来接通和断开控制电路(其中电流很小)，从而控制电动机或其他电气设备的运行。

常用的按钮有LA等系列。

图1所示的是一种按钮的外形与剖面图。

按钮的符号如表1所示。

对于复合按钮，将按钮帽按下时，下面一对原来断开的静触点被动触点接通，以接通某一控制电路；而上面一对静触点则被断开，以断开另一控制电路。

可以简单总结起动作过程：按下先断“1”“2”后合“3”“4”，松开先断“3”“4”后合“1”“2”。

原来就接通的触点，称为动断触点或常闭触点；原来就断开的触点，称为动合触点或常开触点。

(a) 外形图(b)剖面图图1 按钮的外形与结构图
名称常闭按钮常开按钮复合按钮结构符号表1按钮的符号
1。

在《自绘按钮的实现》一文中所示范的CXPButton按钮从形状上看可以说是一个不规则按钮。

我们把MFC中提供的控件成为标准控件，而其中的按钮控件则可称为规则按钮，因为它是的形状是一个规则的矩形。

但是随着流线型设计在界面设计中被广泛采用，越来越多的程序设计者都乐意在自己的作品中加入一些非规则形状的控件。

以按钮为例，最简单的就到有圆形按钮，三角按钮等。

下图是一组定义好的圆形按钮：但是这些在我们眼中似乎呈现出不规则形状的按钮，有时候的表现却不近乎人意。

以之前设计的CXPButton为例，下面我们就来找找它的缺陷。

我们把对话框的背景色改为其它颜色，看看会有什么效果。

修改背景色的方法如下：为对话框类添加WM_ERASEBKGND消息，如果你在类向导中找不到该消息，请参考《自绘按钮的实现》中介绍的方法，注意在添加对话框中要把Filter for messages available to设为Child Window才能在列表中看到WM_ERASEBKGND消息。

我们在函数中添加绘制背景色的代码：BOOL CXPButtonDemoDlg::OnEraseBkgnd(CDC* pDC){BOOL retValue= CDialog::OnEraseBkgnd(pDC);CRect rc;GetClientRect(&rc);pDC->FillSolidRect(&rc,RGB(0,0,255));return retValue;}编译后运行程序，可以看到下面的效果，在按钮的四个角上出现了难看的边角，这就是我所说的缺陷了：既然发现了问题，下面当然就是动手来解决问题的时间了。

在《自绘按钮的实现》一文中曾经讲过，按钮的绘制主要在DrawItem()函数中完成。

这里要补充一点就是DrawItem()是MFC所提供的系统函数，所以可以通过下图的方法添加。

选择Add Virtual Function…之后在弹出对话框左边的列表中找到DrawItem，选择Add and Edit即可。

按钮的表现形式有哪些
01什么是按钮
按钮（Button）官方的概念描述我就不多说了，按钮在我理解，就是“可点击的可触发的即时操作媒介”。

02按钮类型
从按钮类型来分，按钮有四种类型：主按钮、次按钮、虚线按钮和链接按钮。

主按钮在同一个操作区域最多出现一次。

从承载媒介来区分，有文字型的、图标型的、几何型的
从样式来区分，有线型的、面型的。

从组合方式来区分有组合按钮和单个按钮
我们这里主要以几何形按钮为常规按钮来叙述并区分。

03按钮状态
按钮从状态来分分为：
常规(normal/primary)
悬浮（hover）
点击（click）
不可点击（disabled）
常规主按钮可选择符合产品调性的按钮色，悬浮按钮（PC端状态）和点击按钮（click）则是需要在视觉上给予一定反馈的。

我常规的处理办法是hover状态层顶部覆盖透明度为15%的白色，click 状态层顶部覆盖透明度为15%的深色。

不可点击状态（disabled）则置灰即可。

收藏⼏个好看的button样式<style>.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid}.btn1_mouseout {BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid}.btn1_mouseover {BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid}.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}.btn3_mouseout {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn3_mouseover {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn3_mousedown{BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid}.btn3_mouseup {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn_2k3 {BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid}</style><button class=btn title="这是CSDN的官⽅按钮"> 好看的CSDN Button</button><P></p><buttonclass=btn1_mouseout onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'"title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:> 好看的Green Button</button> &nbsp;<buttonclass=btn1_mouseout onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" DISABLED> 好看的Green Button</button><P><button class=btn2 title="这是e商2003的官⽅按钮"> 好看的 Button</button><P><button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:> 好看的QQ Button</button><P><button class=btn_2k3 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:好看的 2k3 Button</button>。