Fancy checkboxes

by trolleymusic

HTML

<h2>Checkboxes</h2>
<div class="slide">
    <input type="checkbox">
    <label></label>
</div>

<div class="slide">
    <input type="checkbox">
    <label></label>
</div>

<div class="slide">
    <input type="checkbox">
    <label></label>
</div>

<div class="slide">
    <input type="checkbox">
    <label></label>
</div>

<h2>Radio buttons</h2>
<div class="slide">
    <input type="radio" name="radio-1">
    <label></label>
</div>

<div class="slide">
    <input type="radio" name="radio-1">
    <label></label>
</div>

<div class="slide">
    <input type="radio" name="radio-1">
    <label></label>
</div>

<div class="slide">
    <input type="radio" name="radio-1">
    <label></label>
</div>

CSS

div {
    position: relative;       
    margin: 20px;
    display: inline-block;
}

h2 {
    margin: 20px;
    margin-bottom: 0;
}

.slide {
    width: 50px;
    height: 50px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff));
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px #dddedf, inset 0 0 0 6px #fff;
    overflow: hidden;
}

.slide input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 100;
    cursor: pointer;
}

.slide label {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;

    border-radius: 100%;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
        
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
    
}

.slide input:checked ~ label,
.slide input:active ~ label{
    box-shadow: 0 0 2px silver, inset 0 0 3px 1px rgba(0,0,0,0.2), inset 0 0 10px 0 rgba(0,0,0,0.1);
}

.slide input ~ label:after {
    content: '';
    display: block;
    position: absolute;
    left: 40%;
    top: 40%;
    width: 20%;
    height: 20%;
    border-radius: 100%;
    background: #dfdedd;
}
.slide input:checked ~ label:after {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    box-shadow: 0 0 3px 2px #bdf3fd;
}