html css开关按钮样式,纯CSS实现开关按钮

上面这种开关按钮在现代网页UI设计中经常出现，代替了以前丑陋的checkbox。在很多UI框架中如elementUI都有组件可以直接使用。但是画出这样一个开关是十分简单的，不需要借助JS代码就可以实现。核心思路就是将原有input框进行隐藏，通过label标签(自带选中功能)和伪元素就可画出开关。

画出开关后实现点击效果就很简单了，利用CSS3提供的伪类:checked，即选中checkbox的时候，让开关实现特定效果，如背景变色，滑块移动。利用:active伪类实现点击开关中间的按钮有一个变大的效果。代码含有注释，可以进行参考html>

html,

body {

margin: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

input {

/* 直接将input默认框隐藏不展示 */

display: none;

}

/* 点击input框时label背景变色 */

input:checked + label {

background: #ff6348;

}

/* 点击input框时label伪元素圆形按钮移动 */