Criando botão estilo interruptor com CSS3

5/5 - (1 vote)

Muitas vezes desejamos personalizar nossos formulários para fazer alternativas cada vez mais amigáveis para os usuários. Um item que fica interessante um botão do estilo interruptor para ativar e desativar algo.

Nesse tutorial, criaremos um botão estilo interruptor, onde mostrar como OFF e ON, quando você clica, utilizando o CSS3.

Vamos começar pelo html:

 <div class="switch">
    <input type="checkbox" name="option" id="option" />
    <label for="option"><span></span></label>
</div>

Criamos uma div.switch que engloba o nosso botão, e dentro da div, temos input, pra fazer o efeito de marcar botão, como ligado e desligado. E também vamos adicionar label, pra definir o corpo do botão, e o span que será o interruptor.

No CSS, vamos usar pseudo-classe before (antes), after (depois), e conjunto com a propriedade content, para adicionar um conteúdo dos elementos. Vamos utilizar também, background gradiente linear, sua sintaxe seria assim:

background: linear-gradient(COR INICIAL, COR FINAL);

Vamos agora o CSS.

CONFIGURAR A DIV.SWITCH QUE SERÁ O NOSSO BOTÃO

.switch{
    width:180px;
    height:50px;
    margin:0 auto;
    position:relative;
}

Define a largura (width) e altura(height);
Centraliza na horizontal (margin:0 auto);
Define position:relative, delimitando o espaço, dos elementos filhos que utilizarposition:absolute;

VAMOS CONFIGURAR AGORA O INPUT:CHECKBOX.

.switch input{
    display:block;
    width:100%;
    height: 100%;
 
    position:absolute;
    top:0;
    left:0;
    z-index: 10;
 
    opacity: 0;
    cursor: pointer;
 
}

Alterar para display:block, para ocupar todo o espaço, definido pelo elemento Pai;
Define a largura (width) e altura(height);
Define position:absolute;
Define top e left como 0 (zero);
Define z-index:10 para sobrepor a todos os elementos;
Define opacity:0 para ocultar o input;
Define cursos:pointer, para aparecer cursor de link.

CONFIGURA O LABEL, QUE SERÁ O ESPAÇO INTERNO DO BOTÃO.

.switch label{
    display: block;
    width: 100%;
    height: 100%;
 
    background: -moz-linear-gradient(#750000, #B20000);
    background: -ms-linear-gradient(#750000, #B20000);
    background: -o-linear-gradient(#750000, #B20000);
    background: -webkit-linear-gradient(#750000, #B20000);
    background: linear-gradient(#750000, #B20000);
 
    border-radius: 40px;
}

Alterar para display:block, para ocupar todo o espaço, definido pelo elemento Pai;
Define a largura (width) e altura(height);
Define um background gradiente (linear), utilizamos os prefixos pra funcionar nos navegadores (-moz, -ms, -o, -webkit);
Define os cantos arredondados;

IREMOS ADICIONAR UM ELEMENTO DEPOIS DO LABEL, PARA O EFEITO DA BORDA.

.switch label:after{
    content: "";
 
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
     z-index: -1;
 
    background: -moz-linear-gradient(#EEEEEE, #AAAAAA);
    background: -ms-linear-gradient(#EEEEEE, #AAAAAA);
    background: -o-linear-gradient(#EEEEEE, #AAAAAA);
    background: -webkit-linear-gradient(#EEEEEE, #AAAAAA);
    background: linear-gradient(#EEEEEE, #AAAAAA);
 
    border-radius: inherit;
 
}

Adiciona um conteúdo vazio com content;
Define position:abolute;
Define top, left, right, bottom -10px, pra definir espessura da borda;
Define z-index:-1, para ficar atrás de todos os elementos;
Define um background gradiente linear;
Define border-radius: inherit, pra utilizar a configuração do elemento pai, que no caso será40px.

CONFIGURA O ELEMENTO SPAN, PARA O EFEITO DO INTERRUPTOR

.switch label span{
  display: block;
  width: 60%;
  height: 100%;
  background: #C0C0C0;
 
  position: absolute;
  z-index: 2;
  right: 41%;
  top: 0;
 
  background: -moz-linear-gradient(#E0E0E0, #A0A0A0);
  background: -ms-linear-gradient(#E0E0E0, #A0A0A0);
  background: -o-linear-gradient(#E0E0E0, #A0A0A0);
  background: -webkit-linear-gradient(#E0E0E0, #A0A0A0);
  background: linear-gradient(#E0E0E0, #A0A0A0);
 
  border-radius: inherit;
 
}

Altera o display pra block, pra definimos altura e largura ;
Define largura (width) e altura (height);
Define position:absolute, para posicionar de acordo com elemento pai;
Define o z-index:2 pra sobre a borda do botão;
Define um background gradiente linear;
Define border-radius: inherit, pra utilizar a configuração do elemento pai,que no caso será 40px.

CONFIGURA O ITEM DO CENTRO DO INTERRUPTOR.

.switch label span:after {
  content: "";
 
  position: absolute;
  left: 15%;
  top: 25%;
 
  width: 70%;
  height: 50%;
 
  background: -moz-linear-gradient(#F7F7F7, #CCCCCC);
  background: -ms-linear-gradient(#F7F7F7, #CCCCCC);
  background: -o-linear-gradient(#F7F7F7, #CCCCCC);
  background: -webkit-linear-gradient(#F7F7F7, #CCCCCC);
  background: linear-gradient(#F7F7F7, #CCCCCC);
  border-radius: inherit;
}

Adiciona um conteúdo vazio com content;
Define um position:absolute, para posicionar esse elemento;
Define as dimensões (largura e altura) do centro do interruptor;
Define um background gradiente (linear);
Define border-radius: inherit, pra utilizar a configuração do elemento pai, que no caso será 40px;

VAMOS ADICIONAR TEXTO DENTRO DO BOTÃO QUANDO ESTIVER DESLIGADO.

Usaremos a pseudo-classe :before, para adicionar o conteúdo antes do span, com o content;

.switch label span:before {
 content: "off";
 
 position: absolute;
 top: 50%;
 margin-top: -12px;
 right: -50%;
 
 text-transform: uppercase;
 font-weight: bold;
 font-family: Arial, sans-serif;
 font-size: 24px;
 
 color: #fff;
 
}

Adiciona o texto off, com o content;
Define o position:absolute, posicionar o elemento;
Define que fique 50% do topo;
Define o margin-top:-12px para centralizar na vertical;
Define que fique -50% para direita;
Define que ficar letra em maiúsculo;
Define a fonte em negrito;
Define a família da fonte como Arial;
Define o tamanho da fonte como 24px;
Define a cor do texto branca;

CONFIGURA A COR DO ELEMENTO QUANDO DESLIGAR O BOTÃO.

Por padrão ele começa ligado, com a cor vermelha aparecendo, agora vamos adicionar a cor verde, de ligado, quando desligar o botão. Selecionaremos o elemento label, precedito (~) quando o input estiver marcado (:checked);

.switch input:checked ~ label {
 
  background: -moz-linear-gradient(#004010, #1A6600);
  background: -ms-linear-gradient(#004010, #1A6600);
  background: -o-linear-gradient(#004010, #1A6600);
  background: -webkit-linear-gradient(#004010, #1A6600);
  background: linear-gradient(#004010, #1A6600);
}

Define o background gradiente linear (cor vermelha);

AFASTAR INTERRUPTOR PARA DIREITA, EFEITO DESLIGADO.

Selecionaremos o elemento span dentro do label, precedito (~) quando o input estiver marcado (:checked);

.switch input:checked ~ label span{
  right: -2px;
}

Define -2px para direita.

ADICIONAREMOS CONTEÚDO ON, PRA MOSTRA QUANDO ESTIVER O EFEITO DESLIGADO.

Selecionaremos o elemento span:before dentro do label, precedito (~) quando o input estiver marcado (:checked);

.switch input:checked ~ label span:before {
  content: "on";
  right: 115%;
}

Adiciona o conteúdo On, com content;
Afasta da direita 115%;

VAMOS A TODO CSS DO EFEITO DO BOTÃO ESTILO INTERRUPTOR.

.switch{
    width:180px;
    height:50px;
    margin:0 auto;
    position:relative;
 
}
 
.switch input{
    display:block;
    width:100%;
    height: 100%;
 
    position:absolute;
    top:0;
    left:0;
    z-index: 10;
 
    opacity: 0;
    cursor: pointer;
 
}
 
.switch label{
    display: block;
    width: 100%;
    height: 100%;
 
    background: -moz-linear-gradient(#750000, #B20000);
    background: -ms-linear-gradient(#750000, #B20000);
    background: -o-linear-gradient(#750000, #B20000);
    background: -webkit-linear-gradient(#750000, #B20000);
    background: linear-gradient(#750000, #B20000);
 
    border-radius: 40px;
}
 
.switch label:after{
    content: "";
 
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    z-index: -1;
 
    background: -moz-linear-gradient(#EEEEEE, #AAAAAA);
    background: -ms-linear-gradient(#EEEEEE, #AAAAAA);
    background: -o-linear-gradient(#EEEEEE, #AAAAAA);
    background: -webkit-linear-gradient(#EEEEEE, #AAAAAA);
    background: linear-gradient(#EEEEEE, #AAAAAA);
 
    border-radius: inherit;
 
}
 
.switch label span{
    display: block;
    width: 60%;
    height: 100%;
    background: #C0C0C0;
 
    position: absolute;
    z-index: 2;
    right: 41%;
    top: 0;
 
    background: -moz-linear-gradient(#E0E0E0, #A0A0A0);
    background: -ms-linear-gradient(#E0E0E0, #A0A0A0);
    background: -o-linear-gradient(#E0E0E0, #A0A0A0);
    background: -webkit-linear-gradient(#E0E0E0, #A0A0A0);
    background: linear-gradient(#E0E0E0, #A0A0A0);
 
    border-radius: inherit;
 
}
 
.switch label span:after {
    content: "";
 
    position: absolute;
    left: 15%;
    top: 25%;
 
    width: 70%;
    height: 50%;
 
    background: -moz-linear-gradient(#F7F7F7, #CCCCCC);
    background: -ms-linear-gradient(#F7F7F7, #CCCCCC);
    background: -o-linear-gradient(#F7F7F7, #CCCCCC);
    background: -webkit-linear-gradient(#F7F7F7, #CCCCCC);
    background: linear-gradient(#F7F7F7, #CCCCCC);
    border-radius: inherit;
}
 
.switch label span:before {
    content: "off";
 
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: -50%;
 
    text-transform: uppercase;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 24px;
 
    color: #fff;
 
}
 
.switch input:checked ~ label {
 
    background: -moz-linear-gradient(#004010, #1A6600);
    background: -ms-linear-gradient(#004010, #1A6600);
    background: -o-linear-gradient(#004010, #1A6600);
    background: -webkit-linear-gradient(#004010, #1A6600);
    background: linear-gradient(#004010, #1A6600);
}
 
.switch input:checked ~ label span{
    right: -2px;
}
 
.switch input:checked ~ label span:before {
    content: "on";
    right: 115%;
 
}

Agora vamos ver o efeito em funcionamento: Clique Aqui

Se você deseja conhecer mais sobre os poderes do CSS3, temos um curso sobe medida pra você.

Twittar