Feche o botão CSS
Exemplo 1:
Vamos criar o arquivo html para projetar nosso botão de fechamento. O arquivo CSS será criado no qual iremos estilizar nosso botão de fechamento. Usamos o código do Visual Studio para todos esses. Quando criamos o arquivo HTML, no código do Visual Studio, então escrevemos o código neste arquivo. Temos que salvar o arquivo HTML com a extensão do arquivo de “.HTML ”e o arquivo CSS com a extensão de“.CSS ”. Vamos tentar o código fornecido:
O código acima é o código HTML, então aqui está o tipo deste documento mencionado como "html". Usamos tags em html, então temos que abrir tags de "" e "". A meta é definida na tag "" e define como "charset = utf-8". Ao usar isso, podemos usar muitos caracteres. Para vincular ao arquivo CSS, usamos o "" aqui e o "rel" descreve o relacionamento. O "href" é para dar o nome do arquivo CSS, que temos que juntar -se a este arquivo html. Nós vinculamos o “Buttonstyle.Arquivo CSS "usando" ".
Agora, feche a tag "" e abra a "". A classe "" está aqui para a separação de dados da web. Temos que projetar o botão neste arquivo html. O tipo de botão é "botão" e a classe é chamada "btn-close". Em seguida, abra “” e esta classe de span é definida com o nome “icon-cross”. O "& time" exibirá o "X" para o botão de fechar. Fechar "", "", "
e "" tags.
Código CSS:
Na codificação CSS, damos estilo ao nosso botão de fechamento que criamos no arquivo html. Primeiro, mencione a classe de botão que é "btn-close". Coloque um ponto antes deste "close btn" e um suporte aberto. Defina "margem", "borda" e "preenchimento" para "0". Como a margem é para criar o espaço, a borda é para criar a borda ao redor do botão. O preenchimento é para criar espaços entre elementos, então definimos tudo isso como "0".
Queremos aplicar “preto” como a cor de fundo, para que coloquem “fundo: preto” aqui. A “cor” descreve a cor da fonte ou cruz. O "raio da borda" se ajustou a "20%". A largura descreve a largura do botão Fechar que é "40px" e a altura também é "40px". A “exibição” é “flex” para que defina o comprimento flexível para o visor. A propriedade "Flex-Flow" é aplicada aqui à "coluna Nowrap". Temos que justificar o conteúdo para o centro. Então, a linha "Justify-Content: Center" a justificará para o centro. Além disso, alinhe os itens ao centro. Selecione o "cursor" como "ponteiro". A transição é aplicada, pois controlará a velocidade quando a propriedade CSS mudar. Está definido como "todos os 150ms".
Para a saída, temos que usar o navegador. Podemos usar qualquer navegador. Instalamos um navegador pressionando "Ctrl+Shift+X" e instalando "Open in Browser". Em seguida, para renderizar a saída, pressionamos “Alt+B” e a saída será exibida e o botão aparece na tela que é mostrado abaixo.
Aqui, você pode ver que criamos um botão de fechamento simples. Nos próximos exemplos, criaremos mais de um botão de fechamento e os projetaremos usando cores e formas diferentes no CSS.
Exemplo # 2:
Neste exemplo, vamos criar mais de um botão de fechamento e aplicar cores diferentes nesses botões de fechamento. Crie os botões de fechamento no arquivo html.
Neste arquivo html, criamos vários botões de fechamento usando a tag "". Nomeamos a classe do botão como "botão" para criar o primeiro botão. Em seguida, coloque um símbolo "X" que é exibido como o caractere "x" próximo. Chamamos a segunda classe de botão “Botão2”. O nome da classe do terceiro botão é "botão 3". E os quartos e quinto botões são nomeados "Button Button4" e "Button Button5", respectivamente. Devemos fechar a tag de botão em cada linha.
Código CSS:
Na primeira linha, coloque um ponto e digite o nome do primeiro botão que é "botão" aqui e comece a projetar o botão. A cor do "fundo" do primeiro botão de fechamento é "#4CAF50", que é o código de cor verde, então o primeiro botão de fechamento parecerá verde. A próxima "cor" é para definir a cor do "x" como "branco".
Agora, “preenchimento” é vertical “15px” e “32px” é aplicado. O "alinhamento de texto" é definido para o "centro". Não temos nenhum texto escrito no botão Fechar, então definimos a propriedade "Decoração de texto" como "Nenhum". O "monitor" como "bloqueio em linha" é para exibir um contêiner em linha em linha. Corrija o "tamanho da fonte" para "16px". E as margens verticais são "4px" e a margem horizontal é "2px". "Ponteiro" é usado como um "cursor".
Agora, queremos alterar as cores de fundo do botão restante, então apenas adicionamos a cor de fundo aos botões restantes. Feche o suporte do primeiro botão. Coloque um ponto e o nome do segundo botão e defina a cor de fundo. O código da cor de fundo é "#008CBA", que é exibido como "azul". Altere a cor de todos os botões com a mesma propriedade e salve -a. Veja a saída, todos os botões próximos são de cores diferentes.
Exemplo # 3:
Usamos nosso arquivo HTML anterior que criamos no Exemplo 2 e basta alterar o código CSS. Em seguida, aplique formas diferentes no botão Fechar aqui neste exemplo.
Código CSS:
Definimos a cor de fundo para o primeiro botão como "verde". O preenchimento é "20px" e isso se aplicará a todos os quatro lados. O "tamanho da fonte" é alterado para "16px". A margem é vertical “4px” e “2px” horizontal. A nova propriedade que adicionamos nos botões restantes é a propriedade "Radio de fronteira". Isso mudará os cantos do botão em uma forma redonda. E também aplique cores diferentes em todos os botões.
O "Radius de fronteira" para o primeiro botão é definido como "2px" e a cor de seu "fundo" é "vermelho". O segundo botão "Radius de borda" é "4px" e a "cor de fundo" é "azul". O terceiro, quarto e quinto botões "Radius de fronteira" são "8px", "12px" e "50%", respectivamente. Além disso, as cores do fundo para esses botões são "amarelas", "roxas" e "laranja", respectivamente. Verifique a saída e veja como esses botões fechados aparecem no navegador.
Na saída acima, você pode notar que os cantos dos botões fechados são arredondados. Todos os botões próximos são de formas diferentes. O último botão de fechamento é um botão de fechamento em forma de círculo. Aplicamos todos esses estilos em nosso arquivo CSS.
Conclusão:
Este guia é fornecido para você saber como criar o botão Fechar em HTML e CSS. Aqui, nós projetamos e estilizamos diferentes botões de fechamento. Também fornecemos o código HTML e CSS e a saída de todos os códigos também. Você aprendeu o uso de HTML e CSS neste guia e poderá criar os botões de fechamento sempre que precisar deles em seus projetos ou sites. Também explicamos os códigos aqui e demonstramos três exemplos diferentes para você.