Los botones y el CSS

Como bien saben las hojas de estilos en cascada CSS son sin lugar a duda uno de los instrumentos más ventajosos que se pueden emplear en toda página web. Estos nos dejarían el determinar todo aspecto con el que se va a mostrar todos y cada uno de los componentes de nuestro sitio, obteniendo así esa distribución entre la información y presentación tan querida por todo desarrollador.

A través de CSS se puede optimizar notoriamente todo aspecto en cuanto a los botones de un formulario, siempre y cuando el navegador empleado por nuestra visita aguante tal aplicación de estilos a esos componentes, o sea, todos los navegantes de una generación moderna.

Un ejemplo a continuación seria el ajuste del apesto de afuera de todo botón en la página, brindándole así un tono azul en el fondo, eliminando el aspecto 3D y colocando texto en blanco, con una fuente Verdana de 10 pixels. Asimismo, se concretará el tamaño definitivo. El Código requerido sería:

 

<style type=”text/css”>   .boton{         font-size:10px;         font-family:Verdana,Helvetica;         font-weight:bold;         color:white;         background:#638cb5;         border:0px;         width:80px;         height:19px;        } </style> <div align=”center”>   <form name=”form1″ action=”http://www.yahoo.es” target=”_blank” method=”post”>     <input type=”text” name=”prueba”><br><br>     <input type=”submit” value=”enviar” class=”boton”>   < /form> </div>

 

Estudiando un tanto el código, se verá que se ha determinado esa clase de estilo, .boton, el cual define todo atributo anhelado para el botón. La clase ya está determinada plasmando, dentro de esas etiquetas <style…>…</style> todo nombre de un mismo precedido por los puntos, algunas llaves y adentro de éstas todos los elementos queridos con los respectivos valores.

De esa manera se lograría concretar el aspecto definitivo de todo botón, poseyendo la liberta de determinar cuántas clases se requieren.

Como beneficios de este procedimiento está el completo ajuste en cuanto a aspecto ya que se sigue poseyendo un botón submit predeterminado (por lo que si se presiona la tecla Enter se remitirá cualquier dato de ese formulario).