A set of beautiful pure CSS3 sliding switch buttons

黄舟
Release: 2017-01-18 13:28:08
Original
2220 people have browsed it

Brief Tutorial

This is a set of exquisite sliding switch button effects made using CSS3. This set of sliding buttons is designed according to Bootstrap's scenario class and can adapt to 5 different scenarios, as well as an unavailable state.

How to use

HTML structure

The basic HTML structure of the sliding button effect uses a

element to wrap an element and two< label> element.

<div class="switch-box">
  <input id="default" class="switch-box-input" type="checkbox" />
  <label for="default" class="switch-box-slider"></label>
  <label for="default" class="switch-box-label">Default</label>
</div>
Copy after login

CSS Style

The first

.switch-box .switch-box-slider {
  position: relative;
  display: inline-block;
  height: 8px;
  width: 32px;
  background: #d5d5d5;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
Copy after login

. The ::after pseudo-element of the switch-box-slider element is used to create a circular slider.

.switch-box .switch-box-slider:after {
  position: absolute;
  left: -8px;
  top: -8px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  content: &#39;&#39;;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
Copy after login

When the .switch-box-input element is in the checked state, the left attribute of the :after pseudo-element of .switch-box-slider is modified, and the circular slider is moved.

.switch-box .switch-box-input ~ .switch-box-label {
  margin-left: 8px;
}
.switch-box .switch-box-input:checked ~ .switch-box-slider:after {
  left: 16px;
}
Copy after login

The above is the content of a set of exquisite pure CSS3 sliding switch buttons. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template