按钮开关的原理、结构、分类以及型号说明

起按钮开关，在平时生活中已经很普及了，几乎是随处可见，与我们的生活息息相关，那么既然是与我们生活如此息息相关的一个东西，那么你对他的了解又有多少呢？相信如果不是对这方面有了解的，普通人一般都没什么了解或者说了解的不多，不够详细，那么接下来将会从简单的关于按钮开关是什么，原理是什么、结构怎么样、有哪些分类、以及平时看不懂的型号说明。来帮助大家更好的去了解什么是按钮开关。

首先我们介绍一下，什么是按钮开关以及按钮开关的原理是什么：

按钮开关简称按钮，通常用来接通和断开控制电路，它是电力拖动中一种发出指令的低压电器，应用十分广泛的一种主令电器，在电气自动控制电路中，用于手动发出控制信号以控制接触器、继电器、电磁起动器等。其特点是安装在工作进行中的机器、仪表中，大部分时间是处于初始自由状态的位置上，只是在有要求时才在外力作用下转换到第二种状态(位置)，当外力一旦除去，由于弹簧的作用，开关就又回到初始位置。按钮开关可以完成启动、停止、正反转、变速以及互锁等基本控制。通常每一个按钮开关有两对触点。每对触点由一个常开触点和一个常闭触点组成。当按下按钮，两对触点同时动作，常闭触点断开，常开触点闭合。

当我们知道什么是按钮开关或者说对按钮开关有一定了解之后，我们接下来介绍一下关于按钮开关的结构：

按钮开关的结构：由按钮帽、复位弹簧、固定触点、可动触点、外壳和支柱连杆等组成。按钮不受外力作用(即静态)时触头的分合状态，分为启动按钮(即常开按钮)、停止按钮(即常闭按钮)和复合按钮(即常开、常闭触头组合为一体的按钮)。对启动按钮而言，按下按钮帽时触头闭合，松开后触头自动断开复位;停止按钮则相反，按下按扭帽时触头分开，松开后触头自动闭合复位。复合按钮是按下按钮帽时，桥式动触头向下运动，使常闭触头先断开后，常开触头才闭合;当松开按钮帽时，则常开常开触头先分断复位后，常开触头再闭合复位。

接下来我们将详细的介绍，按钮开关究竟有哪些分类，虽然我们日常生活中接触过很多按钮开关，但是对我们来说是不是都大同小异，感觉都差不多一个样呢？其实呢，虽说外观看起来相似，实则他们的作用或者类别可能却大不相同，所以，下面将会详细的介绍一下到底有哪些分类：

①按钮开关按用途和触头的结构不同分类?：

1.常开触头（动合触头）：是指原始状态时（电器未受外力或线圈未通电），固定触点与可动触点处于分开状态的触头。

2.常闭触头（动断触头）：是指原始状态时（电器未受外力或线圈未通电），固定触点与可动触点处于闭合状态的触头。

3.常开（动合）按钮开关，未按下时，触头是断开的，按下时触头闭合接通；当松开后，按钮开关在复位弹簧的作用下复位断开。在控制电路中，常开按钮常用来启动电动机，也称启动按钮。

4.常闭（动断）按钮开关与常开按钮开关相反，末按下时，触头是闭合的，按下时触头断开；当手松开后，按钮开关在复位弹簧的作用下复位闭合。常闭按钮常用于控制电动机停车，也称自复位按钮。

5.复合按钮开关：将常开与常闭按钮开关组合为一体的按钮开关，即具有常闭触头和常开触头。未按下时，常闭触头是闭合的，常开触头是断开的。按下按钮时，常闭触头首先断开，常开触头后闭合，可认为是自锁型按钮；当松开后，按钮开关在复位弹簧的作用下，首先将常开触头断开，继而将常闭触头闭合。复合按钮用于联锁控制电路中。

②按钮开关可按操作方式、防护方式分类：

1.防水式：带密封的外壳，可防止雨水侵入。代号为S

2.防腐式：能防止化工腐蚀性气体的侵入。代号为F

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

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

5.钥匙式：用钥匙插入旋转进行操作，可防止误操作或供专人操作。代号为Y

6.开启式：适用于嵌装固定在开关板、控制柜或控制台的面板上。代号为K

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

8.紧急式：有红色大蘑菇钮头突出于外，作紧急时切断电源用。代号为J或M

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

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

11.组合式：多个按钮组合。代号为E

12.联锁式：多个触点互相联锁。代号为C

最后是关于按钮开关的型号说明，我们平时可能会看到按钮开关上面有一串字符，字母加数字甚至带横杠的，不知道这些标识到底代表着什么意思，接下来就会介绍一下这些字符串究竟代表着什么意义：

举一个例子：

①PB-②01 ③口 ④口 ⑤R ⑥口

①标示产品名称代码

②标示产品型号代码

③标示按钮的个数

1：表示2个按钮

2：表示4个按钮

3：表示6个按钮

4：表示8个按钮

5：表示10个按钮

6：表示12个按钮

④标示产品的附加操作按钮搭配代码

无：无全部功能控制按钮

E：表示产品中有急停按钮

⑤R：表示产品中有启动按钮

S：表示产品中有停止按钮

O：表示产品中有入切按钮

D：表示产品中有调速按钮

⑥1：表示产品中有2位是双速控制按钮

2：表示产品中有4位是双速控制按钮

3：表示产品中有6位是双速控制按钮

4：表示产品中有8位是双速控制按钮

5：表示产品中有10位是双速控制按钮

6：表示产品中有12位是双速控制按钮

可以根据自己的需求来自由的组合运用。

宏聚开关（http://www.zghongju.com/hydt/946.html）转载请注明出处！

于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青[小鼓掌][小鼓掌][小鼓掌]。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁点时间就可以的，需要我们的日积月累，时刻专研。

而今天，就带给大家一个CSS特效-霓虹灯按钮，这也是我看到很不错的效果，带来分享给大家，希望大家喜欢[送心][送心][送心]

效果如下：

最终效果

那好，废话不多说，开始我们的CSS代码。

准备一个HTML标签

// 这里我们用div标签来模拟button按钮，标签可以随意，a、p、span等都可以
// 通常在开发中使用别的标签来代替button标签，是因为原始的标签样式不好看，
// 我们还得重置样式，而其他标签不带有样式，我们可以更好的控制自己想要的样式，
// 当然，button标签也是可以的，但是如前面所说，原始的样式需要我们重置。
<div class="btn">button</div>

CSS部分的代码

body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景，只为更能突出样式效果
}
// 初始化按钮样式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 渐变属性，函数用于创建一个表示两种或多种颜色线性渐变的图片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始样式为这样：

初始样式

然后我们给按钮加上动画，代码如下：

.btn:hover {
  	// linear: 动画从开始到结束具有相同的速度。
    // infinite: 无限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就变为下面这样：

最后我们给它加上鼠标移上去的效果，代码如下：

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

现在这样，就是我们的最终效果了：

就此，我们的霓虹灯的按钮效果就完成了

不足百行，我们就完成了这个效果，以下是我们的CSS的全部代码：

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性=名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
?	?	已注册
?	?	版权
?	?	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

在线咨询

上一篇：App与Web的设计区别（上）：使用场景与设计方法
下一篇：《魔兽世界》经典怀旧服现已开服

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商