纯CSS3滑动按钮

最新推荐文章于 2022-05-12 15:53:09 发布

cocosgirl

最新推荐文章于 2022-05-12 15:53:09 发布

阅读量820

点赞数

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/cocos2dGirl/article/details/81355549

版权

web 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

漂亮的滑动开关按钮

代码如下：

粘过去可直接测试

<html>
<style>
.slide-switch {
  position: relative;
  display: inline-block;
}
.slide-switch:after, .slide-switch:before {
  font-family: FontAwesome;
  -webkit-font-feature-settings: normal;
     -moz-font-feature-settings: normal;
          font-feature-settings: normal;
  -webkit-font-kerning: auto;
     -moz-font-kerning: auto;
          font-kerning: auto;
  -webkit-font-language-override: normal;
     -moz-font-language-override: normal;
          font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.slide-switch label {
  width: 60px;
  height: 20px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slide-switch label:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  left: 0;
  top: 0px;
  z-index: 2;
  background: #fff;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slide-switch input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}        
.slide-switch input:hover + label:after {
}
.slide-switch input:checked + label:after {
  left: 40px;
}
 
.model-1 .slide-switch input:checked + label {
  background: #376ecb;
}
.model-1 .slide-switch input:checked + label:after {
  background: #4285F4;
}  
</style>

<body>
<section class="model-1">
  <div class="slide-switch">
    <input type="checkbox"/>
    <label></label>
  </div>
</section>    
</body>
</html>

cocosgirl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3滑动按钮

漂亮的滑动开关按钮代码如下：粘过去可直接测试&lt;html&gt;&lt;style&gt;.slide-switch { position: relative; display: inline-block;}.slide-switch:after, .slide-switch:before { font-family: FontAwesome; -webk...
复制链接

扫一扫