Tutorial CSS3 Crie um elegante botão liga / desliga
Usar um botão é, até agora, a maneira preferida de interagir com um material eletrônico; como o rádio, a TV, o music player e até mesmo um smartphone que tenha um recurso de comando de voz ainda precisa de pelo menos um ou dois botões físicos.
Além disso, nesta era digital, o botão evoluiu também na sua forma digital, o que o torna mais interativo, dinâmico e real fácil de fazer, comparado ao botão físico.
Então, desta vez, vamos criar um botão liso e interativo baseado neste excelente design no Dribbble usando apenas CSS.
Bem, vamos apenas começar.
HTML
Vamos começar o botão colocando a seguinte marcação em nosso documento HTML. É muito simples, o botão seria baseado em uma tag âncora, também temos um período ao lado dele para criar a luz indicadora e, em seguida, eles são agrupados em um HTML5 seção tag.
& # xF011;
Aqui está como o nosso botão inicialmente parece.
Estilo Básico
Nesta seção, vamos começar a trabalhar no Estilos.
Em primeiro lugar aplicamos este fundo escuro do Padrão Sutil no documento do corpo e centralizamos seção. Então, nós também removeremos o pontilhado esboço sobre o :foco e :ativo ligação.
body background: url ('images / micro_carbon.png'); seção margin: 150px auto 0; largura: 75px; altura: 95 px; posição: relativa; texto-alinhar: centro; : active,: focus estrutura de tópicos: 0; Usando a fonte personalizada
Para o ícone do botão, usaremos uma fonte personalizada do Font Awesome em vez de uma imagem. Dessa forma, o ícone será facilmente estilizado e escalonável através da folha de estilo.
Faça o download da fonte, armazene os arquivos de fonte (eot, woff, ttf e svg) no fontes pasta e, em seguida, coloque o seguinte código na folha de estilo para definir uma nova família de fontes.
@ font-face font-family: "FontAwesome"; src: url ("fontes / fontawesome-webfont.eot"); src: url (formato "fonts / fontawesome-webfont.eot? #iefix") ('eot'), formato url ("fonts / fontawesome-webfont.woff") ('woff'), url ("fontes / fontawesome- webfont.ttf ") format ('truetype'), formato url (" fonts / fontawesome-webfont.svg # FontAwesome ") ('svg'); font-weight: normal; estilo de fonte: normal; 
o ícone de energia que precisamos para este botão é representado no número Unicode F011; se você olhar de perto para a marcação HTML acima, colocamos esse caractere numérico & # xF011; dentro da tag âncora, mas desde que nós não definimos o costume família de fontes no estilo de botão, o ícone ainda deve ser renderizado corretamente.
Leitura adicional: Unicode e HTML: caracteres do documento
Estilizando o botão
Primeiro de tudo, precisamos definir o costume família de fontes para o botão.
Nosso botão será um círculo, podemos alcançar o efeito de círculo usando o raio de borda propriedade e definir o valor em, pelo menos, metade do botão largura.
Desde então, estamos usando uma fonte para o ícone, podemos facilmente definir o cor e adicione text-shadow para o ícone na folha de estilo também.
Em seguida, também criaremos um efeito chanfrado para o botão. Este efeito é bastante complicado. Primeiro, precisamos aplicar cor de fundo: rgb (83,87,93); para a base de cor do botão, então adicionamos até quatro camadas de caixa-sombras.
a font-family: "FontAwesome"; cor: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250,250,250,0,1); tamanho da fonte: 32pt; display: bloco; posição: relativa; text-decoration: nenhum; cor de fundo: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1ª Sombra * / 0px 7px 10px 0px rgb (17,17,17), / * 1ª Sombra * / inserção 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3ª sombra * / inserção 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4ª Sombra * / largura: 70px; altura: 70 px; fronteira: 0; raio de fronteira: 35 px; texto-alinhar: centro; Altura da linha: 79px;
Há também um círculo maior no lado de fora do botão e nós estaremos usando o :antes pseudo-elemento para isso, em vez de adicionar marcação extra.
a: antes de content: ""; largura: 80px; altura: 80px; display: bloco; z-index: -2; posição: absoluta; cor de fundo: rgb (26,27,29); esquerda: -5px; top: -2px; raio de fronteira: 40 px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), inserção 0px 1px 2px rgba (0, 0, 0, 0,5);
Leitura adicional: CSS: antes e depois pseudo-elementos (Hongkiat.com)
Luz indicadora
Sob o botão, há uma pequena luz para designar o status Ligar e Desligar. Abaixo, aplicamos vermelho para a cor da luz porque a energia está inicialmente desligada, também adicionamos Sombra da caixa para imitar o efeito de brilho da luz.
a + span display: bloco; largura: 8px; altura: 8px; cor de fundo: rgb (226,0,0); box-shadow: inserção 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); raio de fronteira: 4 px; limpar ambos; posição: absoluta; fundo: 0; esquerda: 42%;
O efeito
Neste ponto, nosso botão começa a ficar bom e só precisamos adicionar alguns efeitos nele, por exemplo, quando o botão está sendo clicado, queremos que o botão pareça estar sendo pressionado e pressionado..
Para conseguir o efeito, o primeiro Sombra da caixa no botão será zerado e a posição será abaixada um pouco. Nós também precisamos ajustar um pouco as outras três intensidades de sombras para combinar com a posição do botão.
a: ativo box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1ª sombra * / 0px 3px 7px 0px rgb (17,17,17), / * 2ª sombra * / inserção 0px 1px 1px 0px rgba (250, 250, 250, 0,2), / * 3ª sombra * / inserção 0px -10px 35px 5px rgba (0, 0, 0, 0,5); / * 4ª Sombra * / cor de fundo: rgb (83,87,93); top: 3px;
Além disso, uma vez que o botão foi clicado, ele deve permanecer pressionado e o ícone deve 'brilhar' para indicar que a energia está ligada..
Para alcançar tal efeito, direcionaremos o botão usando o :alvo pseudo-classe, depois mude a cor do ícone para branco e adicione um text-shadow com cor branca também.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inserção 0px 1px 1px 0px rgba (250, 250, 250, 0,2) , inserção 0px -10px 35px 5px rgba (0, 0, 0, 0,5); cor de fundo: rgb (83,87,93); top: 3px; cor: #fff; text-shadow: 0px 0px 3px rgb (250,250,250);
Leitura adicional: Usando: alvo pseudo-classe
Nós também precisamos ajustar o Sombra da caixa no círculo fora do botão, como segue.
a: ativo: antes, a: target: before top: -5px; cor de fundo: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), inserção 0px 1px 2px rgba (0, 0, 0, 0,5);
O indicador luminoso mudará da cor padrão vermelho para verde para enfatizar que a energia já está ligada.
a: target + span box-shadow: inserção 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); cor de fundo: rgb (135,187,83);
Efeito de transição
Por fim, para que o efeito do botão seja executado sem problemas, também aplicaremos o seguinte efeito de transição.
Este snippet abaixo adicionará especificamente a transição para o cor propriedade e o text-shadow para 350 ms no elemento âncora.
a transição: cor 350ms, sombra de texto 350ms; -o-transição: cor 350ms, texto-sombra 350ms; -moz-transition: cor 350ms, text-shadow 350ms; -webkit-transition: cor 350ms, text-shadow 350ms;
Este segundo trecho abaixo irá adicionar a transição para o cor de fundo e Sombra da caixa propriedade no indicador de luz.
a: target + span transição: cor de fundo 350ms, sombra de caixa 700ms; -o-transição: cor de fundo 350ms, 700ms de sombra de caixa; -moz-transition: cor de fundo 350ms, box-shadow 700ms; -webkit-transition: cor de fundo 350ms, box-shadow 700ms;
Resultado final
Nós passamos por todos os estilos que precisamos, agora você pode ver o resultado final ao vivo, bem como baixar o arquivo de origem nos links abaixo.
- Demonstração
- Fonte de download
Bônus: como desativá-lo
Aqui vem o bônus. Se você já experimentou o botão da demonstração acima, percebeu que o botão só pode ser clicado uma vez, e é para ligá-lo. Como desativá-lo??.
Infelizmente, temos que fazê-lo com o jQuery, mas é muito simples também. Abaixo está todo o código jQuery que precisamos.
$ (document) .ready (function () $ ('# button'). clique (function () $ (this) .toggleClass ('on'););); O snippet acima irá adicionar a classe ON na âncora, e usamos o toggleClass função de jQuery para adicioná-lo. Então, quando o #botão é clicado, o jQuery irá verificar se a classe ON foi adicionada ou não: quando não estiver, o jQuery irá adicionar a classe, e se ela foi adicionada, o jQuery removerá a classe.
Nota: Não esqueça de incluir a biblioteca jQuery.
Agora temos que mudar um pouco o estilo. Simplesmente substitua todo o :alvo pseudo-elemento com o .em seletor de classe, como segue:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inserção 0px 1px 1px 0px rgba (250, 250, 250, 0,2) , inserção 0px -10px 35px 5px rgba (0, 0, 0, 0,5); cor de fundo: rgb (83,87,93); top: 3px; cor: #fff; text-shadow: 0px 0px 3px rgb (250,250,250); a: ativo: antes, a.on: antes top: -5px; cor de fundo: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), inserção 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: inserção 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); cor de fundo: rgb (135,187,83);
Finalmente, vamos tentar no navegador.
- Demonstração
- Fonte de download
