CSS3使用表情符号的切换开关

Smiley toggle button

css3, switch, toggle, button

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2245
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.switch.off:before,
.switch.off:after,
.switch.on:before,
.switch.on:after {
    -webkit-transition: 0.6s;
    transition: all 0.6s;
}
body {
    background-color: #2A6B64;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.switch {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 40px;
    background-color: #2c2c2c;
    color: #000;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}
.switch.off,
.switch.on {
    border-radius: 25px;
    padding: 5px;
    cursor: pointer;
}
.switch.off:before,
.switch.on:before {
    display: block;
    position: absolute;
    content: "";
    height: 39px;
    width: 39px;
    left: 4px;
    top: 5px;
    background-color: #F2C74E;
    -webkit-transition: 0.6s;
    transition: all 0.6s;
    -webkit-transition-delay: 0.01s;
    transition-delay: 0.01s;
    -moz-box-shadow: inset -8px -8px 6px -6px #c7960f;
    -webkit-box-shadow: inset -8px -8px 6px -6px #c7960f;
    border-radius: 50%;
    box-shadow: inset -8px -8px 6px -6px #c7960f;
}
.switch.off:after {
    display: block;
    position: absolute;
    content: ": (";
    -o-transform: rotate(-270deg);
    -webkit-transform: rotate(-270deg);
    -ms-transform: rotate(-270deg);
    transform: rotate(-270deg);
    left: 17px;
    top: 15px;
}
.switch.on:before {
    -webkit-transform: translateX(38px);
    -ms-transform: translateX(38px);
    transform: translateX(38px);
}
.switch.on:after {
    position: absolute;
    content: ": )";
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 56px;
    top: 15px;
}

HTML

Smiley toggle button

css3, switch, toggle, button

编辑器支持Emmet

快捷键

Smiley toggle button

css3, switch, toggle, button

6款CSS3制作的开关切换按钮

CSS3 文本字符组成的表情图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：