Função para alterar o fundo do botão em HTML

Se você quiser que os botões em suas páginas da Web capturem atenção, você deve fazer mais do que simplesmente adicioná-los ao seu código HTML usando tags "input". Os botões, por padrão, têm planos de fundo cinza com texto em preto. Uma simples função JavaScript pode mudar um plano de fundo chato para um colorido ou mesmo embelezá-lo com uma imagem de sua escolha.

Criando Botões

Sem a formatação CSS, o código necessário para criar um botão básico de página da Web é exibido da seguinte maneira:

Você tem a opção de adicionar uma referência de classe CSS que define o plano de fundo do botão para amarelo, conforme mostrado aqui:

A seguinte classe CSS, colocada na seção de estilo do documento, cria essa classe:

.styleButton {background-color: Yellow;}

Altere "Amarelo" para qualquer cor HTML válida para obter a aparência desejada. Você pode adicionar uma imagem ao plano de fundo do botão usando o seguinte código CSS:

.styleButton {background-image: url ('myImage.jpg');}

Substitua "myImage.jpg" pelo URL de qualquer imagem na Web ou pelo URL de uma imagem em seu servidor da Web.

Parâmetros de Função

O exemplo a seguir mostra a estrutura de uma função que altera o plano de fundo de um botão:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "imagem") {// Alterar imagem de fundo do botão}

else {// Alterar cor de fundo do botão}}

Esta função aceita três parâmetros. O buttonID contém o ID do botão que você deseja alterar. A variável backgroundType pode ter um valor de "cor" ou "imagem". O parâmetro final, buttonBackground, contém a cor que você deseja adicionar ao botão ou ao URL de uma imagem. O código processa a lógica definida no primeiro bloco "if" se você passar "imagem" como o valor do backgroundType. Caso contrário, ele executa as instruções no bloco "else" e altera a cor do plano de fundo do botão.

Lógica de código

O código a seguir lista as instruções necessárias para adicionar uma imagem de plano de fundo a um botão ou alterar sua cor de segundo plano, dependendo do valor passado no parâmetro backgroundType:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "imagem") {// Altera a imagem de fundo do botão var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// Muda a cor de fundo do botão document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Se você chamar a função e passar um backgroundType de "imagem", o código definirá o atributo backgroundImage do botão para a cor passada na variável buttonBackground. Caso contrário, o código define o atributo backgroundColor do botão para a cor passada na variável buttonBackground.

Dicas

Ao usar a função para adicionar uma imagem a um fundo, escolha uma que seja pequena o suficiente para caber dentro do botão. HTML não reduz o tamanho de uma imagem para caber sem um elemento de página. Você também pode fazer movimentos com botões, pulsar ou brilhar, adicionando pequenos GIFs animados a eles. Tenha cuidado ao colocar imagens complexas nos botões, pois eles podem dificultar a leitura do texto do botão se os botões tiverem texto.