Bouton CSS
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.
<button class="btn-on-off state-off">off</button>
<button class="btn-on-off state-on">on</button>
.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;
}