Usando uma combinação de marcação e CSS (Cascading Style Sheets) declarações HTML, websites pode caracterizar elementos interativos, como botões. formulários HTML usar elementos de entrada, incluindo botões para fornecer a interação do usuário dentro de um site. elementos de botão geralmente aparecem de forma padrão dentro do navegador do usuário, mas os desenvolvedores podem optar por fornecer propriedades de estilo específicas que determinam a sua aparência, incluindo as fronteiras.
Elemento de entrada
Para incluir um botão HTML em uma página da Web, você pode usar o elemento de entrada. O elemento de entrada é uma característica comum nos formulários Web e pode ser qualquer botão ou texto tipo. O código a seguir exemplo de marcação demonstra incluindo um botão de entrada HTML:
O valor botão determina o texto que será exibido nele. Usando o atributo de classe permite que o código CSS para identificar o botão.
CSS Identificador
código CSS pode identificar elementos HTML usando seus nomes de tags, atributos de identificação ou atributos de classe. Se um desenvolvedor quer aplicar o mesmo estilo a todos os elementos de entrada dentro de um site, ele pode usar o nome do elemento tag como o identificador da seguinte forma:
entrada{
/declarações CSS aqui/
}
Se um elemento é único dentro da página Web e tem um atributo ID, código CSS pode usar isso como segue:
mainbtn {/declarações CSS aqui/
}
Isso poderia funcionar, onde o botão de entrada tem um atributo ID com "mainbtn" como seu valor. Para usar um atributo de classe, caso em que um botão está sendo atribuído a um grupo de elementos, código CSS pode usar a seguinte sintaxe:
input.standardbtn {
/declarações CSS aqui/
}
Declaração fronteira
código CSS pode declarar styling fronteira, em uma série de maneiras. Para declarar um conjunto de propriedades que serão aplicados a todos os lados do elemento botão de entrada, pode ser utilizada a seguinte sintaxe:
input.standardbtn {
border: 1px solid # 000000;
}
Este código especifica a largura da borda, estilo e cor para todos os quatro lados do botão de entrada. Cada um desses elementos pode ter vários valores possíveis para se adequar ao estilo geral de um site ou página.
lados de fronteira
código CSS pode ditar o estilo de cada lado do botão de entrada separadamente. Por exemplo, o código seguinte especifica todas as propriedades do lado superior do botão de entrada numa única linha:
border-top: 3px pontilhadas # FF0000;
código CSS pode alternativamente especificar styling para os quatro lados do elemento em termos de propriedades individuais:
border-width: 1px 1px 2px 2px;
Esta sintaxe determina a largura da parte superior, direita, inferior e esquerdo.
Propriedades de fronteira
código CSS pode ditar styling para propriedades individuais, bem como o uso de taquigrafia para declarar todos eles em uma única linha. Por exemplo, o código a seguir demonstra como configurar a cor da borda:
border-color: # 0000FF;
A seguir demonstra estilo de borda:
border-style: duplo;
Os desenvolvedores são livres para escolher qualquer sintaxe arranjos adequar ao estilo de sites particulares em que trabalham.