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伪元素圆形按钮移动 */

input:checked + label::before {

left: calc(100% - 5px);

transform: translateX(-100%);

}

/* 点击input框时label伪元素圆形按钮放大 */

input:active + label::before {

width: 130px;

}

/* 开关背景样式 */

label {

position: relative;

display: block;

cursor: pointer;

width: 200px;

height: 100px;

border-radius: 100px;

background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)),

#ddd;

box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset,

0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);

}

/* 开关圆形按钮 */

label::before {

content: '';

position: absolute;

width: 90px;

height: 90px;

background: linear-gradient(#f5f5f5 10%, #eeeeee);

border-radius: 90px;

top: 5px;

left: 5px;

transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);

}

好看的按钮开关

codepen less实现链接，可以进行调试：