Blog do MX Cursos

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:

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:

Vamos agora o CSS.

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

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

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

 

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

  • 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

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

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

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

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

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

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

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

 

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

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

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!