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实现链接，可以进行调试：

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

马自达css滑动按钮,纯css的滑块开关按钮
之前在项目中使用滑块开关按钮,纯css写的,不考虑兼容低版本浏览器,先说下原理: 使用 checkbox 的选中 checked 属性改变css 伪类样式, 一定要使用-webkit-appeara ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
[css] 怎样用纯CSS实现禁止鼠标点击事件？
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
html 瀑布流样式,纯css如何实现瀑布流？css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
css人脸识别的圆圈,一个人脸识别的样式纯CSS代码
一个人脸识别的样式纯纯CSS, 复制下方代码修改下图片路径即可人脸扫码效果 img { position: absolute; /* display: none ...
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...
css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码纯css实现wif ...
html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...

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

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

最新文章

热门文章