Como estilizar o botão de entrada e enviar com CSS
CSS é um idioma para criar folhas de estilo que descrevem como um documento é apresentado em um idioma de marcação, como HTML ou XML. Juntamente com HTML e JavaScript, o CSS é um componente essencial da World Wide Web. Usando CSS, os usuários podem estilizar todos os elementos HTML, incluindo tabelas, botões, campos de entrada, formas e muito mais.
Este post explicará:
- Como estilizar campos de entrada com CSS?
- Como estilo enviar botão com css?
Como estilizar campos de entrada com CSS?
Para estilizar o campo de entrada com CSS, experimente o procedimento mencionado.
Etapa 1: Crie formulário de entrada
Primeiro de tudo, crie um formulário em html. Para fazer isso, siga as instruções listadas abaixo:
- Primeiro, crie um formulário com a ajuda do “" marcação.
- Dentro do formulário, o “”O elemento é definido para especificar legendas para o“entrada”Elementos. O rótulo é “para”O atributo é usado para anexar o elemento do rótulo com elemento através de“eu ia”.
- O "tipo”O atributo determina o tipo de entrada, como texto ou número.
- O "aula”Atributo é atribuído o“Entrada" nome, "espaço reservado”Atributo aloca o texto do espaço reservado no campo de entrada:
Saída
Etapa 2: Botão de entrada de estilo no CSS
Para estilizar o botão de entrada no CSS, confira as propriedades fornecidas:
entrada
preenchimento: 8px;
Radio de fronteira: 10px;
margem: 5px automático;
borda: 1px Solid #918383;
Background-Color: #87B8B8;
Shadow de caixa: 1px 2px 1px 2px RGB (230, 229, 229);
Cor: #C9C2C2;
Esboço: Nenhum;
Size da fonte: 18px;
Acesse o "entradaClasse e, em seguida, aplique propriedades abaixo mencionadas:
- Definir "preenchimento”Isso especifica o espaço em torno do conteúdo do elemento.
- ““Radio de fronteira”Propriedade define as bordas do elemento.
- ““margem”Propriedade com o valor“5px Auto"Adiciona espaço"5px”Em cima e inferior, e“auto”É usado para definir espaço igual ao redor do elemento à esquerda e direita.
- ““fronteira”Propriedade especifica a fronteira ao redor da mesa.
- ““cor de fundo”A propriedade é utilizada para especificar a cor do fundo.
- ““Sombra da caixa”Adiciona uma sombra ao redor do elemento. É uma propriedade abreviada que especifica o offset x, y-offset, efeito desfoque, efeito de espalhamento e cor para a sombra.
- ““cor”Propriedade refere -se à cor da fonte do elemento.
- ““contorno”Ajusta a linha em torno dos elementos para torná -la dominante.
- ““tamanho da fonte”A propriedade é utilizada para definir o tamanho da fonte do elemento.
Saída
Em seguida, acesse o “rótulo”Elemento para estilizar:
rótulo
Size da fonte: 18px;
Cor: RGB (15, 15, 15);
margem: 20px;
Depois de acessar o elemento da etiqueta, aplique o estilo de sua escolha. Por exemplo, nós aplicamos “tamanho da fonte","cor", e "margem”Propriedades.
Saída
Vamos passar em direção à próxima seção para estilizar o botão Enviar usando CSS.
Como estilo enviar botão com css?
Para estilizar o botão Enviar com CSS, examine o exemplo abaixo, que demonstra um guia de etapa sobre como criar e estilizar o botão HTML.
Etapa 1: Crie o botão Enviar
Inicialmente, adicione o texto do cabeçalho dentro da tag de título “”. Em seguida, crie um botão utilizando o “”Elemento e defina o tipo de botão como“enviar”:
Elemento do botão de estilo
Saída
Etapa 2: Elemento de "botão" de estilo
Para estilizar o botão no CSS, consulte as propriedades descritas abaixo:
botão
preenchimento: 12px 40px;
Radio de fronteira: 8px;
Shadow de caixa: 2px 2px 2px 1px RGB (131, 131, 219);
borda: 1px cinza sólido;
Size da fonte: 20px;
Acesse o elemento do botão por nome da tag e aplique as propriedades no botão de acordo com sua preferência. Por exemplo, nós aplicamos “preenchimento","Radio de fronteira","Sombra da caixa","fronteira", e "tamanho da fonte”Propriedades.
Saída
Vamos adicionar o efeito do pau no elemento do botão:
Botão: Hover
Background-Color: CadetBlue;
Cor: RGB (246, 244, 248);
O "Botão: Passe o mouse”O seletor é utilizado para aplicar o efeito do mouse no botão. Com a ajuda do “flutuar”Seletor, os usuários podem gerar o efeito CSS em tempo real. Por exemplo, definimos o “cor de fundo" e "cor”Propriedades como descrito acima:
Discutimos para estilizar o campo de entrada e enviar o botão com CSS.
Conclusão
Para estilizar o elemento de entrada e enviar o botão com CSS, são usadas diferentes propriedades do CSS, incluindo "preenchimento", "radiato de fronteira", "shadow box-shadow", "margem", "borda", "cor de fundo", " tamanho de fonte ”e muito mais. Os usuários podem aplicar as propriedades especificadas acessando os elementos através do nome da tag. Este post demonstrou o método para modelar os campos de texto de entrada e enviar botões com CSS.