纯CSS实现开关元素设计
按钮开关设计哀求及效果本例我们利用CSS完成开关的设计，紧张哀求是在点击开关时开关标识颜色须要改变，其余须要表示出元素点击前与点击后的动态变革与立体效果。本例终极设计呈现效果描述如下图所示：
开关按钮实现效果展示
要实现如上图所示的开关按钮效果，须要针对元素改变鼠标点击前后的CSS样式，由于只利用CSS实现，我们选择本身具有点击属性的INPUT元素。因此还须要考虑对INPUT元素外不雅观进行设置，其设置也紧张是依托于CSS选择器及干系属性的设置。
CSS选择器及属性设置
另一方面本例中涌现的开关标志，紧张利用第三方字体库供应的图标实现，因此须要对font干系属性及CSS外部link方法有所学习节制。本例所利用字体如下所示：
字体图标
在明确基本思路之后，我们可以利用submine进行代码编写，紧张编写步骤如下：
1、链接字体样式
本例利用如上图所示供应的on图标，即Font Awesome图标字体库和CSS框架，因此须要外部链接或者下载相应CSS文件，这里我们选择外部链接，通过利用CSS供应的link，实当代码如下：
字体链接
链接完成之后我们在设置字体时可直策应用FontAwesome字体，个中on图标对应的编码为f011。
2、定义页面内容
本例页面内容紧张利用input元素checkbox属性进行按钮设置。因此页面内容部分定义如下所示：
页面主体部分
3、定义checkbox样式
在完成页面元素添加之后就须要对页面元素进行CSS样式的设置，本例通过元素加type属性作为选择器，选择指定元素并进行样式设置。代码如下：
checkbox属性设置
checkbox属性设置描述如上图所示，设置效果如下：
checkbox属性效果
4、input添加checked、after等样式
为进一步实现点击效果切换及图标按钮的效果，须要对check状态及after伪元素进行CSS样式的设置。个中after为元素紧张用于在上图中添加on开关图标。实当代码描述如下：
after伪元素选择器及样式设置
after伪元素选择器及样式设置如上图所示，紧张完成content内容即on图标设置，字体选择、字体颜色及字体大小设置，设置完成预览效果如下：
after为元素设置效果
要实现点击效果就须要在点击之后对input元素样式进行设置，因此我们利用checked作为选择器对该状态下input样式进行设置。设置代码如下所示：
checked状态CSS设置
checked状态CSS设置如上图所示，我们只对box-shadow阴影进行设置，通过阴影变革实现按钮动态效果。
5、点击之后on图标颜色变革
点击之后on图标颜色变革紧张通过对input[type="checkbox"]:checked，进一步利用after伪元素定义字体颜色实现。实当代码如下所示：
on图标（字体）颜色改变
通过利用该选择器，会在input点击之后，on字体颜色变为赤色。以上给出了input按钮效果实现的基本思路与部分核心实当代码。如需完全案例代码请关注并私信作者。
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码缺点、建议与见地，可在评论区回答。更多程序设计干系教程及实例分享，期待大家关注与阅读！
