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.
.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ê.