Borda do botão CSS
Exemplo 01: Usando CSS para fornecer a um botão uma borda sólida em um arquivo html
Neste exemplo, usaremos uma etiqueta de estilo CSS para modificar um botão em um arquivo html. Adicionaremos uma borda sólida ao botão padrão, que não tem limite para destacá -lo de fundo e o restante da página.
Abrimos a etiqueta de estilo e iniciamos um parâmetro de botão para estilo. Nisso, demos ao botão uma cor de fundo usando o código de referência HTML. Em seguida, demos ao botão uma borda escrevendo -o como uma palavra -chave e demos três propriedades: o tamanho da borda do botão, o estado da fronteira e depois a cor da borda. Então, no estilo, demos ao botão um pouco de preenchimento, alinhamento de texto e propriedades para tornar o botão ajustável ao navegador e mais visível.
Em seguida, fechamos o estilo e a etiqueta de cabeça e nos mudamos para a etiqueta corporal. Nesta tag, demos um título à nossa página HTML usando a tag H1 e depois abrimos a tag de botão. Depois disso, fecharemos as duas tags e salvaremos este script no “.formato html ”para abri -lo em nosso navegador.
Depois de executar o script em nosso navegador, obteremos a saída acima. A saída acima mostra que o botão tem o estilo assim como especificamos na tag de estilo no cabeçalho do arquivo.
Exemplo 02: Usando CSS para fornecer uma borda pontilhada a um botão em um arquivo html
Neste exemplo, adicionaremos uma borda pontilhada ao botão padrão, que não tem borda, para distingui -lo do cenário e o restante da página. O script será desenvolvido no bloco de notas ++ e usará uma tag de estilo CSS para modificar um botão em um arquivo html.
Abrimos a etiqueta de estilo e começamos a personalizar o parâmetro de botão. Usamos o código de referência HTML para fornecer o botão a cor de fundo. Em seguida, demos ao botão uma borda escrevendo -o como uma palavra -chave e dando três propriedades: "4px", que é o tamanho da borda; "Pontilhado", que é a forma da fronteira; e "preto", que é a cor da fronteira.
Em seguida, adicionamos preenchimento, alinhamento de texto, configurações de exibição e tamanho da fonte ao botão para torná-lo mais ajustável ao navegador e perceptível. O estilo e as tags de cabeça foram então fechados. Em seguida é a etiqueta corporal. Usamos a tag H1 para fornecer a nossa página HTML um cabeçalho e depois abrimos a tag de botão na etiqueta do corpo. Escrevemos algum texto que aparecerá no botão nesta tag. Depois disso, fecharemos as duas tags e salvaremos este script em “.formato html ”para que possamos executá -lo em nosso navegador.
Vamos obter a saída acima depois de executar o script em nosso navegador. O trecho mostra que o botão tem uma borda pontilhada preta, conforme definido na tag de estilo no cabeçalho do arquivo.
Exemplo 03: Usando CSS para fornecer a um botão uma borda sólida de bordas redondas em um arquivo html
Neste exemplo, usaremos as tags de estilo CSS para alterar a aparência de um botão em um arquivo html. Criaremos uma borda sólida com cantos redondos e alguma cor para distinguir o botão padrão do primeiro plano e do restante da página.
Abrimos a tag de estilo no script acima e começamos a modificar um parâmetro de botão no cabeçalho do arquivo html. Em seguida, demos ao botão uma borda escrevendo -o como uma palavra -chave e atribuindo três propriedades: "4px", que é do tamanho da borda; "Sólido", que é a forma da fronteira; e "preto", que é a cor da fronteira. Em seguida, adicionamos outra propriedade de fronteira chamada Border-Radius e seu valor é atribuído em pixels para arredondar as bordas da borda. Em seguida, fechamos o estilo e as tags de cabeça antes de passar para a etiqueta corporal. Escrevemos algum texto entre as tags de botão que aparecerão no botão.
Como mostra a saída acima, a borda do botão tem bordas arredondadas e todo o outro estilo que definimos no cabeçalho do arquivo.
Exemplo 04: Usando CSS embutido para adicionar uma borda a um botão em um arquivo html
Neste exemplo, usaremos o estilo CSS embutido em um botão para dar uma borda em um arquivo html. Todo o estilo que será feito no botão seria fornecido dentro da etiqueta do botão.
No script acima, estaremos fazendo todo o estilo no corpo do arquivo. Primeiro, abriremos a tag H1 para dar uma volta na página. Então, vamos abrir a tag de botão. Nesta tag, definiremos o estilo do botão. Iniciaremos o estilo com a palavra -chave de borda e começaremos a fornecer propriedades diferentes como tamanho, forma, cor, preenchimento e alinhamento. Depois disso, fechamos a tag e escrevemos o texto que aparecerá no botão. Em seguida, fechamos todas as tags e executamos este arquivo para obter a saída abaixo:
Como podemos ver na saída, o botão tem todo o estilo que fornecemos na tag de botão e adicionamos com sucesso uma borda a um botão usando CSS embutido.
Exemplo 05: Usando CSS para dar uma borda dupla a um botão em um arquivo html
Vamos adicionar uma borda dupla a um botão neste exemplo. O script será desenvolvido no bloco de notas ++ e usará um método de tag de estilo CSS para modificar um botão em um arquivo html.
Abrimos a etiqueta de estilo e começamos a alterar um elemento de botão no cabeçalho do arquivo html. A borda foi então adicionada ao botão escrevendo -o como uma palavra -chave e atribuindo três propriedades: "10px", o tamanho da borda; "Double", a forma da fronteira; e "preto", a cor da fronteira.
O botão tem todos os estilos da etiqueta de estilo e aplicamos com sucesso uma borda a um botão usando CSS.
Conclusão
Neste artigo, discutimos a fronteira de um botão usando CSS em um arquivo html. O botão padrão de um navegador geralmente não tem estilo e é apenas um quadrado branco simples. Então, usamos CSS para estilizar esse elemento e torná -lo adaptável à página HTML. Neste artigo, discutimos exemplos diferentes nos quais adicionamos uma borda a um botão usando abordagens diferentes, e todos esses exemplos foram implementados no bloco de notas++.