Add to Flipboard Magazine.

Botones HTML y cómo personalizarlos

Los formularios forman una parte fundamental de las aplicaciones web en HTML. Pero existen diferentes insuficiencias en lo que refiere al diseño de botones y formularios interactivos. El problema con el HTML es que ofrece muy pocas opciones para adaptar los elementos al diseño que vayamos a aplicar en nuestra página.

Para cambiar el aspecto visual y funcional de los botones en formularios, HTML ofrece la posibilidad de modificar parámetros muy puntuales: mayor o menor longitud para el recuadro de texto (textarea), modificar el tamaño de la fuente (mediante un truco para saltear espacios en blanco y poco más. Los parámetros de los botones quedan casi totalmente fuera de esta área de edición, complicando el diseño personalizado de aplicaciones web en HTML.

Los botones submit.

Los botones HTML responden casi en su totalidad al tipo “submit” (Enviar). Tienen un aspecto 3D, fondo gris y nada más llamativo a la hora de configurarlos de manera personalizada. SI queremos que nuestro botón apunte directamente a un sitio web puntual, tendremos que introducir el siguiente código:

El uso del código (target=”_blank”) implica que cuando presionemos sobre el botón, la página destino se abrirá en una nueva pestaña. Además, si tenemos el foco en alguno de los elementos del formulario y presionamos sobre el botón Enter, también iremos directamente a la página destino.

Botones y CSS

Al utilizar las Hojas de Estilo CSS podremos definir algunos aspectos que servirán para presentar los elementos de nuestra web. Es importante asegurarnos que el navegador web soporte estos objetos. Cualquier navegador web de 5ta o 6ta generación ya es compatible así que no debería haber problemas.

Por ejemplo, si queremos cambiar la fuente, el color de fondo del botón y eliminar el aspecto 3D, podemos utilizar el siguiente código:

.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:red;
background:#638cb5;
border:0px;
width:80px;
height:19px;
}

El resultado es un botón con fondo azul, letras rojas y tamaño de 12 píxeles. Cada parámetro que modifiquemos nos dará un nuevo aspecto para nuestro botón. Pudiendo fácilmente modificar el botón a partir del uso de Hojas de Estilo CSS, donde el HTML tradicional nos limita las opciones de edición. Dentro del parámetro Style podemos crear nombres para las configuraciones específicas para que cada botón responda a un estilo distinto y así ahorrar tiempo al usar estos botones en cada formulario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *