Como Esconder Um Botão

Índice:

Como Esconder Um Botão
Como Esconder Um Botão

Vídeo: Como Esconder Um Botão

Vídeo: Como Esconder Um Botão
Vídeo: Como esconder pezinho do botão 2024, Maio
Anonim

Às vezes, ao fazer o layout de uma página da web, é necessário ocultar alguns dos elementos inseridos nela. Por exemplo, se você deseja que o visitante não veja os botões de envio do formulário até que todos os campos obrigatórios sejam preenchidos. Ou se o botão não se destina a ser usado pelo visitante, mas o script colocado nesta página deve "clicar" nele.

Como esconder um botão
Como esconder um botão

Instruções

Passo 1

Use a propriedade de exibição das Folhas de estilo em cascata (CSS) para desativar ou ativar a exibição dos elementos de página desejados. De acordo com os padrões internacionais, esta propriedade pode ser atribuída a mais de uma dúzia e meia de valores que especificam diferentes métodos de exibição. No entanto, apenas quatro são cross-browser (ou seja, funcionam em todos os principais navegadores). Entre esses quatro, existe o valor none de que você precisa, o que permite ocultar o elemento de página desejado.

Passo 2

Crie o conjunto necessário de diretrizes CSS. Em sua forma mais simples, pode ter a seguinte aparência: button {display: none;} Neste caso, a página não exibirá todos os botões que usam a tag….

etapa 3

Adicione uma indicação ao nome da classe nas instruções se desejar ocultar apenas um botão ou um grupo específico de botões. Por exemplo, nomeie essa classe HideBtns e adicione este nome à instrução CSS: button. HideBtns {display: none;} Adicione o atributo de classe ao botão desejado no código HTML da página e atribua a ele o valor HideBtns: botão oculto

Passo 4

Aplique a propriedade display com o valor none ao elemento pai se desejar, por exemplo, ocultar não apenas o botão, mas também outros elementos do formulário da web. O formulário é considerado o "pai" de todos os elementos colocados entre as tags e. Por exemplo:

Aqui, um campo de texto e um botão para enviar o valor inserido são colocados dentro do formulário. O formulário é atribuído a uma classe chamada HideForm, portanto, para ocultar o campo de entrada e o botão, você precisa alterar a instrução CSS da seguinte maneira: form. HideForm {display: none;}

Etapa 5

Coloque o código preparado no exemplo acima no cabeçalho do documento da web (entre as tags e). Para informar ao navegador do visitante que este é um código CSS, ele deve ser colocado entre as tags de estilo HTML de abertura e fechamento:

button. HideBtns {display: none;}

Recomendado: