漂亮纯CSS3滑动按钮特效

PetitQ 按钮图标 2019-1-20 2.28K 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 滑动按钮特效

已有 569 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

按钮图标

漂亮纯CSS3滑动按钮特效

HTML 结构

CSS 样式

漂亮纯 CSS3 滑动按钮特效

相关文章

基于Bootstrap超酷jQuery开关按钮插件

Material design风格点击波特效 ripplet 插件

DOM元素拖拽弹性反弹变形动画

发表回复取消回复

热销模板

按钮图标

HTML 结构

CSS 样式

漂亮纯 CSS3 滑动按钮特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复