Dando estilo a botones de tipo submit


En este artículo veremos cómo modificar el estilo que viene por defecto en los botones de ASP .Net Por defecto un botón se mostraría en el navegador como:

clip_image002

El código html que corresponde es el siguiente:
<asp:Button ID="btnAutenticar"
runat="server"
ValidationGroup="vgAutenticar"
            OnClick="btnAutenticar_Click"
Text="Aceptar" />

Haremos uso del siguiente estilo que nos permitirá personalizar el botón y además podremos añadir una imagen:

input[type="submit"] { font-size:8pt;
font-family:tahoma,arial,sans-serif
color:#474a4d;
font-weight:bolder;
border:1px solid #f9f9f9;
                     cursor:pointer;
height:24px;
padding-left:20px;
padding-right:10px;
overflow:visible; }
input[type="submit"]:hover { background-color:#C1D2EE;
border:1px solid #316AC5; }

.asp-button-security-login 

     background: #cdcbbd url(images/button_security.gif) 
                 no-repeat left center
}

 Definidos los estilos procedemos a modificar nuestro botón en el cual solo añadimos la clase  asp-button-security-login que hemos creado para la imagen:

<asp:Button ID="btnAutenticar"
CssClass="asp-button-security-login"
runat="server"
ValidationGroup="vgAutenticar"
            OnClick="btnAutenticar_Click"
Text="Aceptar" />

De esta manera hemos logrado que el botón ahora se muestre así:

clip_image004


Cuando pasamos el puntero por encima lo vemos así:

clip_image006


Debemos destacar un problema de compatibilidad en Internet Explorer y es que cuando usábamos la vista de compatibilidad el botón se mostraba con un doble padding:

clip_image008


Esto lo corregimos usando la propiedad overflow:visible; en el estilo.

No hay comentarios:

Publicar un comentario