CSS переключатели

Благодаря свойствам linear-gradient и box-shadow в данном примере реализуются CSS переключатели.

Вы можете легко менять надписи и иконки на переключателях и экспериментировать с эффектами тени переключателей.

HTML

<span class="toggle">
<input type="checkbox">
<label data-off="&#10006;" data-on="&#10004;"></label>
</span>

<span class="toggle">
<input type="checkbox">
<label data-off="&#9724;" data-on="&#9654;"></label>
</span>

<span class="toggle">
<input type="checkbox">
<label data-off="Stop" data-on="Play"></label>
</span>

CSS

body {
background-color:#eee;
text-align:center;
padding:85px 0;
}

.toggle {
position:relative;
display:inline-block;
width:40px;
height:60px;
background-color:#bbb;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
text-align:center;
}

.toggle input {
width:100%;
height:100%;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}

.toggle label {
display:block;
position:absolute;
top:1px;
right:1px;
bottom:1px;
left:1px;
background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
-moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font:normal 11px Arial,Sans-Serif;
color:#666;
text-shadow:0 1px 0 white;
cursor:text;
}

.toggle label:before {
content:attr(data-off);
position:absolute;
top:6px;
right:0;
left:0;
z-index:4;
}

.toggle label:after {
content:attr(data-on);
position:absolute;
right:0;
bottom:11px;
left:0;
color:#666;
text-shadow:0 -1px 0 #eee;
}

.toggle input:checked + label {
background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
-moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
}

.toggle input:checked:hover + label {
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
}

.toggle input:checked + label:before {
z-index:1;
top:11px;
}

.toggle input:checked + label:after {
bottom:9px;
color:#aaa;
text-shadow:none;
z-index:4;
}