漂亮纯CSS3滑动按钮特效

PetitQ 按钮图标 2019-1-20 2.29K 0 0

这是一组共 15 种不同效果的纯 CSS3 滑动按钮。这些滑动按钮通过使用“CHECKBOX HACK”技术，通过 checkbox 和 label 元素来完成这些滑动按钮的动画效果。

HTML 结构

所有的滑动按钮都采用相同的 HTML 结构，在一个

也想出现在这里？联系我们吧

元素中包裹元素和一个空的元素。

```
<section class="model-1">
```
```
  <div class="checkbox">
```
```
    <input type="checkbox"/>
```
```
    <label></label>
```
```
  </div>
```
```
</section>
```

CSS 样式

首先对 checkbox 及其伪元素，label 和 input 元素进行重置，并设置它们的基本的样式。

```
.checkbox {
```
```
  position: relative;
```
```
  display: inline-block;
```
```
}
```
```
.checkbox:after, .checkbox: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;
```
```
}
```
```
.checkbox label {
```
```
  width: 90px;
```
```
  height: 42px;
```
```
  background: #ccc;
```
```
  position: relative;
```
```
  display: inline-block;
```
```
  border-radius: 46px;
```
```
  -webkit-transition: 0.4s;
```
```
  transition: 0.4s;
```
```
}
```
```
.checkbox label:after {
```
```
  content: '';
```
```
  position: absolute;
```
```
  width: 50px;
```
```
  height: 50px;
```
```
  border-radius: 100%;
```
```
  left: 0;
```
```
  top: -5px;
```
```
  z-index: 2;
```
```
  background: #fff;
```

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

```
  -webkit-transition: 0.4s;
```
```
  transition: 0.4s;
```
```
}
```
```
.checkbox input {
```
```
  position: absolute;
```
```
  left: 0;
```
```
  top: 0;
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  z-index: 5;
```
```
  opacity: 0;
```
```
  cursor: pointer;
```
```
}
```

然后通过“CHECKBOX HACK”技术来实现按钮点击时的动画效果。checkbox hack 允许我们在纯 css 中切换处理程序。它依赖于一个 checkbox(可能是选中状态也可能是未选中状态)，:checked 伪元素和一个兄弟选择器(~ 或 +)。通俗的讲，checkbox hack 的描述是：如果 checkbox 被选中，那么接下来的某个元素的行为是如此如此...

```
.checkbox input:hover + label:after {
```

  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);

```
}
```
```
.checkbox input:checked + label:after {
```
```
  left: 40px;
```
```
}
```
```
 
```

.model-1 .checkbox input:checked + label {

```
  background: #376ecb;
```
```
}
```

.model-1 .checkbox input:checked + label:after {

```
  background: #4285F4;
```
```
}
```

漂亮纯 CSS3 滑动按钮特效

已有 573 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

按钮图标

漂亮纯CSS3滑动按钮特效

HTML 结构

CSS 样式

漂亮纯 CSS3 滑动按钮特效

相关文章

精美的纯CSS3滑动开关按钮

仿Facebook切换表情符号jQuery插件

8种CSS3按钮动画特效

发表回复取消回复

热销模板

按钮图标

HTML 结构

CSS 样式

漂亮纯 CSS3 滑动按钮特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复