Función para cambiar el fondo del botón en HTML

Si desea que los botones de sus páginas web llamen la atención, debe hacer más que simplemente agregarlos a su código HTML usando etiquetas de "entrada". Los botones, por defecto, tienen fondos grises con texto negro. Una simple función de JavaScript puede convertir el fondo de un botón aburrido en uno colorido o incluso adornarlo con una imagen de su elección.

Creando Botones

Sin el formato CSS, el código necesario para crear un botón de página web básica aparece de la siguiente manera:

Tiene la opción de agregar una referencia de clase CSS que establece el fondo del botón en amarillo como se muestra aquí:

La siguiente clase de CSS, colocada en la sección de estilo de su documento crea esa clase:

.styleButton {background-color: Yellow;}

Cambie "Amarillo" a cualquier color HTML válido para lograr el aspecto que desea. Puede agregar una imagen al fondo del botón usando el siguiente código CSS:

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

Reemplace "myImage.jpg" con la URL de cualquier imagen en la Web o la URL de una imagen en su servidor Web.

Parámetros de función

El siguiente ejemplo muestra el marco de una función que cambia el fondo de un botón:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Cambiar la imagen de fondo del botón}

else {// Cambiar el color de fondo del botón}}

Esta función acepta tres parámetros. La ID de botón contiene la ID del botón que desea cambiar. La variable backgroundType puede tener un valor de "color" o "imagen". El último parámetro, buttonBackground, contiene el color que desea agregar al botón o la URL de una imagen. El código procesa la lógica definida en el primer bloque "if" si pasa "imagen" como valor del tipo de fondo. De lo contrario, ejecuta las instrucciones en el bloque "else" y cambia el color de fondo del botón.

Lógica de código

El siguiente código enumera las declaraciones necesarias para agregar una imagen de fondo a un botón o cambiar su color de fondo según el valor pasado en el parámetro backgroundType:

function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Cambiar la imagen de fondo del botón var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// Cambiar el color de fondo del botón document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Si llama a la función y le pasa un tipo de fondo de "imagen", el código establece el atributo backgroundImage del botón al color pasado en la variable buttonBackground. De lo contrario, el código establece el atributo backgroundColor del botón al color pasado en la variable buttonBackground.

Consejos

Cuando utilice la función para agregar una imagen a un fondo, elija una que sea lo suficientemente pequeña como para caber dentro del botón. HTML no reduce el tamaño de una imagen para ajustarse sin un elemento de página. También puede hacer que los fondos de los botones se muevan, pulsen o brillen agregándoles pequeños GIFS animados. Tenga cuidado al colocar imágenes complejas en los botones, ya que pueden dificultar la lectura del texto del botón si sus botones tienen texto.