Alternar o botão CSS
Usando tags HTML, não existe um método simples para construir um botão de alternância. Para construir um botão de alternância de alternância, devemos empregar o estilo CSS.
Criando um botão de alternância:
Embora não exista uma tag HTML nativa para construir um botão de alternância de alternância, você pode utilizar a caixa de seleção e depois alterá -la usando CSS para construir um botão de alternância. Para esse fim, usaremos o elemento "entrada" com a caixa de seleção do atributo para construir uma "caixa de seleção".
O elemento fornece controles interativos destinados a formulários baseados na Web que obtêm informações de usuários. Dependendo do tipo de recurso, o elemento pode ser de vários tipos. O atributo "ID" no elemento de entrada refere -se a uma afirmação específica da folha de estilo. O item com o ID especificado também pode ser modificado através disso.
A caixa de seleção tem uma área clicável muito pequena, mas a chave de alternância requer uma área maior. Então, para ampliar a área interativa, inclua -a em uma etiqueta de etiqueta. Dentro da "etiqueta", coloque uma etiqueta "span" para fazer um controle deslizante com CSS depois. No HTML, a tag é empregada para aumentar a eficiência dos operadores de cursor. O controle é alternado quando uma pessoa atinge os dados dentro do elemento.
Abaixo está o código CSS, para alterar o elemento da etiqueta dentro deste script, o elemento da etiqueta do comutador também é conectado ao elemento de caixa de seleção HTML via seu ID. Ao pressionar o rótulo de uma caixa de seleção, você pode marcar ou descartá -lo.
O trecho acima criará uma caixa de seleção simples.
Agora, usaremos o estilo CSS para dar a aparência de um botão de alternância. As informações de design de uma página da web (CSS) são fornecidas usando o atributo. A tag descreve a maneira como os componentes do HTML devem ser exibidos em um navegador. Pegue o elemento da etiqueta e ajuste sua largura, altura, posição, cor de fundo, radio de borda e outras propriedades. O atributo de largura do CSS determina a largura do domínio de conteúdo de um objeto. A altura de um elemento é determinada pelo atributo de altura. O atributo do radiato de fronteira dá a borda da borda externa de um elemento uma aparência arredondada. Você pode construir cantos circulares com um único raio ou cantos elípticos com dois raios.
Aplicando a propriedade CSS “Display: Inline Block”, as diretrizes de design podem ser adicionadas a componentes HTML específicos. A posição de um elemento com o atributo “Posição: relativa;” é relativo à sua posição padrão. Um item relativamente posicionado alteraria a partir da colocação padrão quando as propriedades esquerda, superior, inferior ou direita são modificadas. Faremos parecer uma área clicável, dando -lhe um cursor de ponteiro e obscurecendo a caixa de seleção com “Cursor: Ponteiro”.
Você pode utilizar a propriedade CSS Cursor para indicar o tipo de cursor que o usuário deve ver. A largura e a altura do objeto do rótulo são necessárias, pois elas definem a região real clicável do botão de alternância. Use "Display: Nenhum" para tornar a caixa de seleção padrão invisível. Esta propriedade é usada para esconder e revelar entidades sem removê -las e substituí -las. Embora ainda esteja presente no código -fonte, o elemento associado não captura não lacuna.
Agora, temos uma área clicável, conforme exibido na tela de saída.
O "botão interno" agora deve ser construído após a conclusão da "concha externa". Agora utilizaremos o elemento "span" para criar o controle deslizante. Está sendo usado para layout objetos através de agrupá -los. Se você pretende destacar uma certa frase ou peça de material, poderá estilizá -lo envolvendo -o em um elemento de span, dando -lhe uma etiqueta de classe e depois escolhendo isso com os valores dos recursos. Atribua a ele colocação absoluta, superior e esquerda para colocá -lo sobre o componente do rótulo. Forneça este elemento "span" com a "largura" e "altura" que você definiu para o elemento de etiqueta. Faremos uma alça deslizante circular agora, utilizando a pseudo-classe. Esta classe com o atributo de conteúdo é comumente exercida para adicionar material estilístico a um elemento.
Depois de executar o código acima mencionado, um controle deslizante redondo é gerado no interruptor.
Com a "caixa externa" e o "botão interno" no lugar, tudo o que resta é lidar com a troca. Também podemos incluir nosso atributo "transição", que fará com que o círculo se mova da direita para a esquerda quando clicado. O “Transform: Translatex (n);”, a propriedade é responsável pelo movimento real: que mudará o pseudo-elemento uma quantidade especificada de pixels ao lado do eixo x. Usamos um novo identificador para o pseudo-elemento “:: antes” e o atributo “transição” para o identificador de controle deslizante atual. O atributo ":: antes" gera o primeiro filho do elemento alvo como um elemento pseudo-elementos. Para acomodar a transição da esquerda para a direita, apenas incluímos o atributo "TradrateX" para o romance pseudo-elemento.
Na saída final, criamos um botão de alternância de trabalho.
Adicionando texto no botão de alternância:
Como na ilustração anterior, fizemos um botão simples de alternância sem texto. Para adicionar texto ao botão de alternância, simplesmente inserimos um componente HTML adicional dentro dele e projetamos -o com uma folha de estilo para criá -lo aparecendo como um rótulo.
Utilizaremos a pseudo-classe para construir rótulos que sejam exibidos ou desligados com base no status do botão de alternância. Podemos usar a propriedade de dados para incluir atributos de dados arbitrários em elementos HTML. Para o modo Off, corrigiremos a opacidade para 0 e para o modo ON; Vamos ajustá -lo para 1. O atributo de opacidade no CSS é utilizado para indicar a visibilidade de um objeto. Em poucas palavras, descreve a clareza da imagem.
O código acima ligará e desligará o texto do botão de alternância.
Alternar o botão quando clicado em:
Tire o botão quando clicado:
Botão de alternância com borda:
Também podemos adicionar fronteiras ao botão de alternância que acabamos de criar acima com o texto. No trecho de código abaixo, definimos todos os elementos necessários para gerar e exibir a borda para o recipiente de botão de alternância, bem como para a bola redonda interna. Além disso, também temos que colocar a cor da fronteira. Em nosso exemplo, o definimos para #2196F3, que é um código de cores hexadecimal para aplicar a cor do blue ciano.
Você pode ver as fronteiras apareceram no botão de alternância resultante.
Conclusão:
Aprender CSS ao se esforçar para se tornar um desenvolvedor da web é um requisito central. Neste artigo, discutimos o comutador de alternância CSS. A primeira parte deste snippet contém uma introdução aos botões de alternância no CSS e depois elaboramos com um script CSS prático da criação do interruptor de alternância. Inserimos ainda o texto no botão de alternância. Na última parte, mostramos como adicionar uma borda ao botão de alternância. Para a implementação dos exemplos de código, utilizamos o Sublime Text Editor.