Categories: Desenvolvimento

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

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

Deixar comentário
Compartilhar
Autor
David CHC
8 anos atrás

Posts recentes

O Futuro da Criação de Sites: Integração de IA e Design Gráfico

Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…

1 mês atrás

Como a IA Está Revolucionando a Animação 3D

A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…

1 mês atrás

Lista das 20 Melhores Inteligências Artificiais em 2024 para Criação de Imagens (Todas Gratuitas)

Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…

1 mês atrás

O Papel da Inteligência Artificial na Criação de Sites com WordPress

Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…

1 mês atrás

5 Tendências em Edição de Vídeo Impulsionadas pela Inteligência Artificial

Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…

1 mês atrás

O Papel Revolucionário da Inteligência Artificial na Dublagem de Filmes

A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…

1 mês atrás

This website uses cookies.