css 滑动按钮样式
2016-08-02 10:48
288 查看
<div class="pub_switch_box"> <input type="checkbox" id="pub_switch_a1" class="pub_switch" /> <label for="pub_switch_a1"></label> <input type="checkbox" id="pub_switch_a2" class="pub_switch" checked /> <label for="pub_switch_a2"></label> </div>
/*滑动按钮样式 <-- start --> */ .pub_switch_box { font-size: 0; display: inline-block; margin-left: 30%; } .pub_switch { display: none; } .pub_switch + label { display: inline-block; position: relative; width: 56px; height: 26px; margin: 5px; background-color: #fafbfa; border-radius: 50px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } .pub_switch + label:after { content:""; position: absolute; top: 0; width: 100%; height: 100%; -webkit-transition: box-shadow 0.1s ease-in; transition: box-shadow 0.1s ease-in; left: 0; border-radius: 100px; box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4); } .pub_switch + label:before { content: ""; position: absolute; top: 0; left: 1px; z-index: 999999; width: 26px; height: 26px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; border-radius: 100px; box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.3); background: white; } .pub_switch:active + label:after { box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee; } .pub_switch:active + label:before { width: 37px; } .pub_switch:checked:active + label:before { width: 37px; left: 20px; } .pub_switch + label:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1); } .pub_switch:checked + label:before { content: ""; position: absolute; left: 31px; border-radius: 100px; } .pub_switch:checked + label:after { content: ""; font-size: 1.5em; position: absolute; background: #3399ff; box-shadow: 0 0 1px #3399ff; } /* <-- end --> */
相关文章推荐
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
- 模仿“百度”及 改变按钮、文本框样式(CSS)
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
- css去掉iPhone、iPad默认按钮样式
- HTML/CSS 自定义开关按钮控件(switch)样式
- css input[type=file] input[type=radio] input[type=checkbox]样式美化,input上传按钮美化
- css去掉iPhone、iPad默认按钮样式
- css去掉iPhone、iPad默认按钮样式
- js通过更改按钮的显示样式实现按钮的滑动效果
- css改变下拉按钮的样式
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
- 漂亮的CSS按钮样式集以及在线生成工具
- css input[type=file] 样式美化,input上传按钮美化
- CSS分页按钮样式代码-www.codesc.net
- Bootstrap框架---CSS全局样式之按钮样式
- CSS按钮和超连接样式
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式
- 一个典型的CSS控制的按钮样式
- css去掉iPhone、iPad默认按钮样式
- CSS按钮样式大全(经典)