css设置图标居左_纯CSS精美按钮UI设计、实现及实例
前⽂中我们对CSS超炫加载动画设计、实现与实例进⾏了讲解与说明，通过学习可知使⽤CSS提供的animation属性及伪元素等可以实现精美的CSS动画效果的设计与开发。本⽂我们将继续介绍CSS在Web页⾯元素设计中的应⽤。
纯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属性进⾏按钮设置。因此页⾯内容部分定义如下所⽰：
页⾯主体部分css鼠标点击样式
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按钮效果实现的基本思路与部分核⼼实现代码。如需完整案例代码请关注并私信作者。
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上⽅⾯有兴趣或代码错误、建议与意见，可在评论区
回复。更多程序设计相关教程及实例分享，期待⼤家关注与阅读！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。