Blog do MX Cursos

Criando botão estilo interruptor com CSS3

Criando botão estilo interruptor com CSS3
Avaliar post

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);

Dica do redator: Quer se especializar ou potencializar suas habilidades em HTML5, CSS3, Javascript, jQuery, Bootstrap, entre outros? Conheça todos nossos Cursos Online de Desenvolvimento Front-End em Vídeo Aulas.
.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ê.

David CHC

David CHC

Trabalha com desenvolvimento web há 10 anos, atuou como programador líder do MX Cursos por mais de 8 anos e hoje dedica-se exclusivamente à criação de cursos para a plataforma. Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3, Gulp.js, GIT, MySQL

Clube de Cursos

Conheça nosso Clube de Cursos e potencialize suas habilidades em Produção e Edição de Vídeos, Design, Marketing Digital, Programaço, WordPress, 3D e Modelagem, Motion Graphics e muito mais!

CONHEÇA O CLUBE

Your Header Sidebar area is currently empty. Hurry up and add some widgets.