Pure CSS3 switch with inner labels.
A Pen by Rodrigo Muniz on CodePen.
<div class="slide pull-right"> | |
<input type="checkbox" id="check" /> | |
<label for="check" class="slider"> | |
<label for="check" class="display on">ON</label> | |
<span class="switch"></span> | |
<label for="check" class="display off">OFF</label> | |
</label> | |
</div> |
Pure CSS3 switch with inner labels.
A Pen by Rodrigo Muniz on CodePen.
html { | |
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |
font-size: 14px; | |
line-height: 20px; | |
color: #333; | |
background-color: #FFF; | |
} | |
body { | |
margin: 180px auto; | |
width: 100px; | |
} | |
// LESS Based: http://codepen.io/godisacoder/pen/aGHDK | |
.slide { | |
display: block; | |
width: auto; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
position: relative; | |
input[type="checkbox"] { display: none } | |
.slider { | |
display: inline-block; | |
border-radius: 16px; | |
width: 64px; | |
height: 26px; | |
white-space: nowrap; | |
position: relative; | |
cursor: pointer; | |
box-shadow: inset 3px 1px 0 1px rgba(0, 0, 0, 0.04), inset -3px -1px 0 1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.1); | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
&:hover .switch {border-color: #08c;} | |
} | |
input:checked ~ .slider {background: #dff0d8;} | |
.display { | |
display: inline-block; | |
cursor: pointer; | |
font-weight: bold; | |
position: absolute; | |
top: 3px; | |
-webkit-transition: all 250ms; | |
-moz-transition: all 250ms; | |
transition: all 250ms; | |
} | |
.on { | |
color: #468847; | |
pointer-events: none; | |
left: 10px; | |
} | |
.off { | |
color: #808080; | |
pointer-events: auto; | |
right: 8px; | |
} | |
input:checked ~ .slider .off { | |
opacity: 0; | |
right: 0; | |
} | |
input:not(:checked) ~ .slider .on { | |
opacity: 0; | |
left: 0; | |
} | |
input:not(:checked) ~ .on { | |
pointer-events: auto; | |
color: #edeff0; | |
} | |
input:not(:checked) ~ .off { | |
pointer-events: none; | |
color: #27343e; | |
} | |
input:not(:checked) ~ .on:hover, | |
input:checked ~ .off:hover {color:#314554} | |
.switch { | |
width: 24px; | |
height: 24px; | |
border-radius: 26px; | |
background: #fff; | |
display: block; | |
position: absolute; | |
top: -1px; | |
left: -3px; | |
-webkit-transition: all 250ms; | |
-moz-transition: all 250ms; | |
transition: all 250ms; | |
border: 2px solid #ccc; | |
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); | |
} | |
input:checked ~ label .switch { | |
left: 100%; | |
margin-left: -24px; | |
border-color: #46a546; | |
} | |
} |