Criando botão estilo interruptor com CSS3

David CHCCSS, Tutoriais1 comentário em Criando botão estilo interruptor com CSS3

Olá a todos!

Neste artigo, vou mostrar um efeito bem interessante, que seria criar um botão estilo interruptor, onde mostrar como OFF e ON, quando você clica, utilizando o CSS3.

Aparência do botão será assim:

Criando botão estilo interruptor com CSS3

Vamos começar pelo HTML:

[html]
<div class="switch">
<input type="checkbox" name="option" id="option" />
<label for="option"><span></span></label></div>
[/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:

[css]
background: linear-gradient(COR INICIAL, COR FINAL);
[/css]

Vamos agora o CSS:

Configurar a div.switch que será o nosso botão.

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

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

Vamos configurar agora o input:checkbox.

[css]
.switch input{
display:block;
width:100%;
height: 100%;

position:absolute;
top:0;
left:0;
z-index: 10;

opacity: 0;
cursor: pointer;

}
[/css]

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

[css]
.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;
}
[/css]

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

[css]
.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;

}
[/css]

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

[css]
.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;

}
[/css]

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

[css]
.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;
}
[/css]

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

[css]
.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;

}
[/css]

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

[css]
.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);
}
[/css]

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

[css]
.switch input:checked ~ label span{
right: -2px;
}
[/css]

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

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

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

Vamos a todo CSS do efeito do Botão estilo interruptor.

[css]
.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%;

}

[/css]

Agora vamos ver o efeito em funcionamento: Clique Aqui

Espero que tenham gostado, e até a próxima.

One thought on “Criando botão estilo interruptor com CSS3”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *