Notes

Bouton CSS

Date
cats
tags

En consultant l'annonce de la dernière version de version de Cinnamon, j'ai remarqué le design d'un bouton d'activation que j'ai eu envie de reproduire en HTML / CSS.

Capture d'écran

Popup de l'applet de configuration de Cinnamon.

Tentative de reproduction du design d'un bouton en HTML/CSS.
<button class="btn-on-off state-off">off</button>
<button class="btn-on-off state-on">on</button>
Code HTML des boutons.
.box {
    padding: 20px;
    background: #5C5C5C;
}
.btn-on-off {
    position: relative;
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
         -o-box-sizing: border-box;
            box-sizing: border-box;
    width: 60px;
    height: 20px;
    padding: 0 3px;
    font: 10px/18px arial,sans-serif;
    text-transform: uppercase;
    border: 1px solid #747474;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background: #666;
    color: #ccc;
    text-shadow: 1px 1px 3px #333;
    -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-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); 
    margin: 0 0 10px;
}
.btn-on-off:before {
    content:"|||";
    cursor: pointer;
    text-align:center;
    line-height: 16px;
    display:block;
    position: absolute;
    top: -1px;
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
         -o-box-sizing: border-box;
            box-sizing: border-box;
    width: 30px;
    height: 20px;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #e9e9e9 #d1d1d1 #a1a1a1 #bebebe;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -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-linear-gradient(center top , #d4d4d4, #a4a4a4); 
    background-image:    -moz-linear-gradient(center top , #d4d4d4, #a4a4a4);
    background-image:     -ms-linear-gradient(center top , #d4d4d4, #a4a4a4); 
    background-image:      -o-linear-gradient(center top , #d4d4d4, #a4a4a4); 
    background-image:         linear-gradient(center top , #d4d4d4, #a4a4a4); 
    color: #979797;
    text-shadow: 1px 1px #fff;
}
.state-off {
    text-align: right;
}
.state-off:before {
    left: -1px;
}
.state-on {
    text-align:left;
}
.state-on:before {
    right: -1px;
}
Code CSS des boutons.