label {
width: 120px;
height: 60px;
display: block
}
label span {
width: 120px;
display: inline-block;
}
.wrap {
position: absolute;
display: inline-block;
width: 100px;
height: 50px;
margin: 0 0 0 20px;
border-radius: 3px;
box-shadow: inset 1px 1px 2px #777;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f2f5f6), color-stop(0.00, #c8d7dc));
background: -webkit-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: -moz-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: -o-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: -ms-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
}
.wrap:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f2f5f6), color-stop(0.00, #a9bfc7));
background: -webkit-linear-gradient(top, #a9bfc7 0%, #f2f5f6 100%);
background: -moz-linear-gradient(top, #a9bfc7 0%, #f2f5f6 100%);
background: -o-linear-gradient(top, #a9bfc7 0%, #f2f5f6 100%);
background: -ms-linear-gradient(top, #a9bfc7 0%, #f2f5f6 100%);
background: linear-gradient(top, #a9bfc7 0%, #f2f5f6 100%);
}
.checkboxes {
width: 100px;
height: 50px;
position: absolute;
opacity: 0;
cursor: pointer;
}
.handle {
cursor: pointer;
width: 46px;
height: 46px;
top: 1px;
left: 1px;
position: absolute;
-webkit-transition: .3s;
-moz-transition: .3s;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.3);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.51, #d1d1d1), color-stop(0.50, #dbdbdb), color-stop(0.00, #dcdcdc));
background: -webkit-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
background: -moz-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
background: -o-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
background: linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
box-shadow: 1px 1px 0px #ccc;
}
.checkboxes:checked~.handle {
left: 51px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #bcf4fd), color-stop(0.75, #87c2fb), color-stop(0.51, #6ba8e4), color-stop(0.50, #8fbff0), color-stop(0.20, #91bae4), color-stop(0.00, #b6e2fd));
background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}
.checkboxes:checked~.handle::after {
content: attr(data-comment);
position: relative;
left: 80px;
top: 11px;
font-weight: bold;
font-size: 14px;
color: #fff;
display: block;
width: 150px;
background: #ccc;
padding: 5px 10px;
text-align: center;
}
line-height: 1;
border-radius: 10px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
<label><span class="wrap"><input class="checkboxes" type="checkbox"><span data-comment="ジーンズ系" class="handle"></span></span></label>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.