A beautiful set of pure CSS3 sliding switch buttons

Brief tutorials

This is a set of beautiful sliding switch button effects made with CSS3. This set of sliding buttons is designed according to bootstrap scenarios and can accommodate 5 different scenarios, as well as an unusable state.

How to use

HTML structure

The basic HTML structure of the Slide button effect uses a <div> element to wrap a <input> element and two <label> elements.

<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 Styles

The first <label> element. Switch-box-slider the sliding axis used to make the slide 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;}

. Switch-box-slider elements:: After pseudo elements are used to make 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. Switch-box-slider: The left property of the after pseudo-element 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;}

Above is a set of beautiful pure CSS3 sliding switch button content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

