A set of beautiful pure CSS3 sliding switch buttons

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>

CSS Style

The first element.switch-box-slider is used to make the sliding axis of the sliding button.

.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;
}

. 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: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

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;
}

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)!

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