Boutons on/off III

Troisième itération dans la création d'un bouton on/off en CSS/HTML, cette fois-ci avec la reprise du style des boutons d'activité des extensions gnome-shell.

Rendu des boutons on/off.
<!-- checkbox classique -->
<p><input type="checkbox" id="on-off-s"><label for="on-off-s">Some setting</label></p>
<!-- checkbox on-off sans libellé -->
<p><input class="on-off unlabel" type="checkbox" id="on-off"><label for="on-off">Some setting</label></p>
<!-- checkbox on-off avec libellé -->
<p><input class="on-off label" type="checkbox" id="on-off-l"><label for="on-off-l">Some setting</label></p>
<!-- checkbox on-off avec libellé à gauche -->
<p><input class="on-off label-left" type="checkbox" id="on-off-lf"><label for="on-off-lf">Some setting</label></p>
<!-- checkbox on-off avec le style des extensions gnome-shell -->
<p><input class="on-off unlabel gse" type="checkbox" id="on-off-gse"><label for="on-off-gse">activated</label></p>
Code HTML.
.on-off {
    border: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
}
.on-off + label {
    position: relative;
    /* typo */
    font: 14px/20px "Liberation Sans", "Ubuntu", "Droid Sans", arial, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    /* box */
    display: inline-block;
    padding: 0;
    margin: 0 0 0 -14px;
}
.on-off.unlabel + label {
    font-size: 0;
    width: 80px;
}
.on-off.label-left + label {
    padding: 0 85px 0 0;
}
.on-off + label:before,
.on-off + label:after {
    /* typo */
    font-size: 14px;
    /* box */
    display: inline-block;
    padding: 2px 5px 2px 8px;
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
             box-sizing: border-box;
}
.on-off + label:before {
    /* typo */
    content: "OFF";
    text-align: right;
    /* box */
    width: 80px;
    /* colors */
    color: #ccc;
    text-shadow: 1px 1px 3px #333;
    border-color: rgba(0,0,0,0.2);
    background-color: #666;
    -webkit-box-shadow: inset 0 0 1px #5C5C5C;
       -moz-box-shadow: inset 0 0 1px #5C5C5C;
         -o-box-shadow: inset 0 0 1px #5C5C5C;
            box-shadow: inset 0 0 1px #5C5C5C;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#373737), to(#4f4f4f));
    background-image: -webkit-linear-gradient(center top , #373737, #4f4f4f);
    background-image:    -moz-linear-gradient(center top , #373737, #4f4f4f);
    background-image:     -ms-linear-gradient(center top , #373737, #4f4f4f);
    background-image:      -o-linear-gradient(center top , #373737, #4f4f4f);
    background-image:         linear-gradient(center top , #373737, #4f4f4f);
}
.on-off.label + label:before {
    margin: 0 5px 0 0;
}
.on-off.label-left + label:before {
    position: absolute;
    right: 0;
}
.on-off + label:after {
    /* typo */
    content:"|||";
    text-align: center;
    font-size: 10px;
    line-height: 20px;
    /* box */
    width: 40px;
    /* position */
    position: absolute;
    top: 0;
    /* colors */
    color: #979797;
    text-shadow: 1px 1px #fff;
    border-color: #e9e9e9 #d1d1d1 #a1a1a1 #bebebe;
    background-color: #ccc;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
       -moz-box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
         -o-box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4d4d4), to(#a4a4a4));
    background-image: -webkit-linear-gradient(top , #d4d4d4, #a4a4a4);
    background-image:    -moz-linear-gradient(top , #d4d4d4, #a4a4a4);
    background-image:     -ms-linear-gradient(top , #d4d4d4, #a4a4a4);
    background-image:      -o-linear-gradient(top , #d4d4d4, #a4a4a4);
    background-image:         linear-gradient(top , #d4d4d4, #a4a4a4);
}
.on-off.unlabel + label:after,
.on-off.label + label:after {
    left: 0;
    -webkit-transition: left 0.2s ease-in-out;
       -moz-transition: left 0.2s ease-in-out;
        -ms-transition: left 0.2s ease-in-out;
         -o-transition: left 0.2s ease-in-out;
            transition: left 0.2s ease-in-out;
}
.on-off.label-left + label:after {
    right: 40px;
    -webkit-transition: right 0.2s ease-in-out;
       -moz-transition: right 0.2s ease-in-out;
        -ms-transition: right 0.2s ease-in-out;
         -o-transition: right 0.2s ease-in-out;
            transition: right 0.2s ease-in-out;
}
.on-off:checked + label:before {
    content: "ON";
    text-align: left;
}
.on-off.unlabel:checked + label:after,
.on-off.label:checked + label:after {
    left: 40px;
    -webkit-transition: left 0.2s ease-in-out;
       -moz-transition: left 0.2s ease-in-out;
        -ms-transition: left 0.2s ease-in-out;
         -o-transition: left 0.2s ease-in-out;
            transition: left 0.2s ease-in-out;
}
.on-off.label-left:checked + label:after {
    right: 0;
    -webkit-transition: right 0.2s ease-in-out;
       -moz-transition: right 0.2s ease-in-out;
        -ms-transition: right 0.2s ease-in-out;
         -o-transition: right 0.2s ease-in-out;
            transition: right 0.2s ease-in-out;
}
.gse + label:before {
    border-width: 2px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(0, 0, 0, 0.6);
    border-width: 2px;
    background-color: #4A90D9;
    background-image: none;
    border-color: #3465A4;
}
.gse + label:after {
    font-weight: bold;
    top: -1px;
    border-width: 3px;
    text-shadow: none;
    border-color: #5f5f5f;
    color: #5f5f5f;
    background-color: #000;
    background-image: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}
Code CSS.