|
body { |
|
background: #202838; |
|
} |
|
|
|
.switch input { |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
|
filter: alpha(opacity=0); |
|
-moz-opacity: 0; |
|
opacity: 0; |
|
z-index: 100; |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
cursor: pointer; |
|
} |
|
|
|
.switch { |
|
width: 180px; |
|
height: 55px; |
|
position: relative; |
|
margin: 100px auto; |
|
} |
|
|
|
.switch label { |
|
display: block; |
|
width: 80%; |
|
height: 100%; |
|
position: relative; |
|
background: #1F2736; /*#121823*/ |
|
background: linear-gradient(#121823, #161d2b); |
|
border-radius: 30px 30px 30px 30px; |
|
box-shadow: |
|
inset 0 3px 8px 1px rgba(0,0,0,0.5), |
|
inset 0 1px 0 rgba(0,0,0,0.5), |
|
0 1px 0 rgba(255,255,255,0.2); |
|
-webkit-transition: all .5s ease; |
|
transition: all .5s ease; |
|
|
|
} |
|
|
|
.switch input ~ label i { |
|
display: block; |
|
height: 51px; |
|
width: 51px; |
|
position: absolute; |
|
left: 2px; |
|
top: 2px; |
|
z-index: 2; |
|
border-radius: inherit; |
|
background: #283446; /* Fallback */ |
|
background: linear-gradient(#36455b, #283446); |
|
box-shadow: |
|
inset 0 1px 0 rgba(255,255,255,0.2), |
|
0 0 8px rgba(0,0,0,0.3), |
|
0 12px 12px rgba(0,0,0,0.4); |
|
-webkit-transition: all .5s ease; |
|
transition: all .5s ease; |
|
} |
|
|
|
|
|
.switch label + span { |
|
content: ""; |
|
display: inline-block; |
|
position: absolute; |
|
right: 0px; |
|
top: 17px; |
|
width: 18px; |
|
height: 18px; |
|
border-radius: 10px; |
|
background: #283446; |
|
background: gradient-gradient(#36455b, #283446); |
|
box-shadow: |
|
inset 0 1px 0 rgba(0,0,0,0.2), |
|
0 1px 0 rgba(255,255,255,0.1), |
|
0 0 10px rgba(185,231,253,0), |
|
inset 0 0 8px rgba(0,0,0,0.9), |
|
inset 0 -2px 5px rgba(0,0,0,0.3), |
|
inset 0 -5px 5px rgba(0,0,0,0.5); |
|
-webkit-transition: all .5s ease; |
|
transition: all .5s ease; |
|
z-index: 2; |
|
} |
|
|
|
/* Toggle */ |
|
.switch input:checked ~ label + span { |
|
content: ""; |
|
display: inline-block; |
|
position: absolute; |
|
width: 18px; |
|
height: 18px; |
|
border-radius: 10px; |
|
-webkit-transition: all .5s ease; |
|
transition: all .5s ease; |
|
z-index: 2; |
|
background: #b9f3fe; |
|
background: gradient-gradient(#ffffff, #77a1b9); |
|
box-shadow: |
|
inset 0 1px 0 rgba(0,0,0,0.1), |
|
0 1px 0 rgba(255,255,255,0.1), |
|
0 0 10px rgba(100,231,253,1), |
|
inset 0 0 8px rgba( 61,157,247,0.8), |
|
inset 0 -2px 5px rgba(185,231,253,0.3), |
|
inset 0 -3px 8px rgba(185,231,253,0.5); |
|
|
|
} |
|
|
|
.switch input:checked ~ label i { |
|
left: auto; |
|
left: 63%; |
|
box-shadow: |
|
inset 0 1px 0 rgba(255,255,255,0.2), |
|
0 0 8px rgba(0,0,0,0.3), |
|
0 8px 8px rgba(0,0,0,0.3), |
|
inset -1px 0 1px #b9f3fe; |
|
|
|
-webkit-transition: all .5s ease; |
|
transition: all .5s ease; |
|
} |
|
|