CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font: 15px/1 arial;
text-align: center;
background: #509DAD;
}
body:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
fieldset {
display: inline-block;
vertical-align: middle;
border: none;
width: 370px;
}
.legend {
color: rgba(0,0,0,.7);
font-size: 12px;
margin-bottom: 14px;
height: 15px;
border-color: #2E6677;
border-style: solid;
border-width: 1px 1px 0 1px;
box-shadow: 1px 1px 0 rgba(255,255,255,0.2) inset;
text-shadow: 0 1px rgba(255,255,255,.3);
}
.legend span {
text-transform: uppercase;
position: relative;
top: -5px;
padding: 0 10px;
background: #509DAD;
display: inline-block;
}
.checkboxGroup {
display: inline-block;
vertical-align: middle;
width: 150px;
border: none;
}
.checkboxControl {
border: 2px solid #102838;
border-radius: 7px;
display: inline-block;
width: 100px;
height: 50px;
padding-top: 1px;
position: relative;
vertical-align: middle;
margin: 0 60px 10px 0;
color: #297597;
box-shadow: 0 0 5px rgba(255,255,255,.4), 0 2px 1px -1px rgba(255,255,255,.7) inset, 8px 0 5px -5px #02425C inset, -8px 0 5px -5px #02425C inset;
-moz-user-select: none;
-webkit-user-select: none;
background: #80DCE9;
}
.checkboxControl input {
position: absolute;
visibility: hidden;
}
.checkboxControl > div {
background: -webkit-linear-gradient(left, #8FD9E4 0%, #A0F2FE 53%, #69DCF1 56%, #33AFCE 99%, #CEF5FF 100%);
background: linear-gradient(to right, #8FD9E4 0%, #A0F2FE 53%, #69DCF1 56%, #33AFCE 99%, #CEF5FF 100%);
box-shadow: -2px 0 1px 0 #A6F2FE inset;
border-radius: 5px;
line-height: 50px;
font-weight: bold;
cursor: pointer;
position: relative;
z-index: 1;
text-shadow: 0 1px rgba(255,255,255,0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scaleX(0.93);
-webkit-transform: scaleX(0.93);
transition: .1s;
-webkit-transition: 0.1s;
}
.checkboxControl div:first-letter {
letter-spacing: 55px;
}
.checkboxControl :checked ~ div {
transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
box-shadow: 2px 0 1px 0 #A6F2FE inset;
background: -webkit-linear-gradient(left, #CEF5FF 0%, #33AFCE 1%, #69DCF1 47%, #A0F2FE 50%, #8FD9E4 100%);
background: linear-gradient(to right, #CEF5FF 0%, #33AFCE 1%, #69DCF1 47%, #A0F2FE 50%, #8FD9E4 100%);
}
.checkboxControl > b {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 100%;
border-radius: 8px;
-webkit-transform: skewY(5deg);
transform: skewY(5deg);
box-shadow: 0 6px 8px -5px #000;
}
.checkboxControl :checked ~ b {
right: auto;
left: 0;
-webkit-transform: skewY(-5deg);
transform: skewY(-5deg);
}
.checkboxControl .indicator {
position: absolute;
top: 14px;
right: -20px;
width: 8px;
height: 25px;
box-shadow: 0 0 8px #000 inset;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.checkboxControl .indicator:before {
content: '';
display: inline-block;
margin-top: 8px;
width: 2px;
height: 8px;
border-radius: 10px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
.checkboxControl :checked ~ .indicator:before {
box-shadow: 0 0 7px 6px #BAFC58;
width: 6px;
background: #F0F9E3;
transition: 0.1s;
-webkit-transition: 0.1s;
}
.checkboxControl2 {
border: 2px solid #102838;
border-radius: 7px;
display: inline-block;
vertical-align: middle;
font-weight: bold;
width: 60px;
height: 100px;
position: relative;
margin: 0 5px;
color: #12678C;
box-shadow: 0 0 5px rgba(255,255,255,.4);
}
.checkboxControl2 input {
position: absolute;
visibility: hidden;
}
.checkboxControl2 > div {
background: -webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
background: linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
height: 100%;
border-radius: 5px;
line-height: 50px;
font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative;
z-index: 1;
cursor: pointer;
text-shadow: 0 1px rgba(255,255,255,0.5);
}
.checkboxControl2 > div:after {
content: 'Ο';
display: block;
height: 50%;
line-height: 4;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.checkboxControl2 > div:before {
content: 'Ι';
display: block;
height: 50%;
line-height: 2.5;
border-radius: 80%/5px;
box-shadow: 0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8);
transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform: scaleY(0.7);
-webkit-transform: scaleY(0.7);
}
.checkboxControl2 :checked ~ div {
background: -webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
background: linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
}
.checkboxControl2 :checked ~ div:before {
border-radius: 0;
box-shadow: none;
transform: none;
-webkit-transform: none;
}
.checkboxControl2 :checked ~ div:after {
border-radius: 80%/5px;
box-shadow: 0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC;
transform: scaleY(0.7);
-webkit-transform: scaleY(0.7);
}
.checkboxControl2 .indicator {
position: absolute;
top: -20px;
left: 17px;
width: 25px;
height: 8px;
box-shadow: 0 0 8px #000 inset;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
transition: 0.2s;
-webkit-transition: 0.2s;
}
.checkboxControl2 .indicator:before {
content: '';
display: block;
margin: 2px auto;
width: 8px;
height: 5px;
border-radius: 10px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
.checkboxControl2 :checked ~ .indicator:before {
box-shadow: 0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757;
background: #FFF;
transition: 0.1s;
-webkit-transition: 0.1s;
}