Simular un enlace con un botón mediante CSS
Me ha surgido la necesidad de simular un enlace con un botón de formulario mediante CSS.
El problema era que semánticamente necesitaba un botón para un formulario que tenía varios botones, pero desde el punto de vista de la usabilidad quedaba mejor que ese botón tuviera la apariencia de un enlace.
Aunque en Internet Explorer he podido simularlo perfectamente, en Mozilla Firefox y Opera no he sido capaz de hacer funcionar el text-decoration: underline. Supongo que no se puede porque un botón no puede ser tratado como un elemento en línea (display: inline).
Para subrayar el texto en Firefox y Opera, al final opté por un borde inferior.
He aquí el código por si alguien le resulta útil:
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.boton {
padding:0;
border-bottom: 1px solid blue !important; /* ignorado por IE */
border: 0px none transparent;
background-color: transparent;
text-decoration: underline;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<input type="submit" class="boton" />
</form>
</body>
</html>
Y aquí puedes ver la demostración.
ACTUALIZACIÓN
He creado una versión perfecta.
Garbage In, Garbage Out referenció
Simular un enlace con un botón mediante CSS (versión 2)
Hace unos días creé mi primera versión para crear simular un enlace a partir de un botón de formulario con CSS...
28 Agosto 2006 | 09:06 AM