¿Cómo hacer que el botón se vea como un enlace?

Necesito hacer que un botón se vea como un enlace usando CSS. Los cambios están hechos, pero cuando hago clic en él, se muestra como si estuviera presionado como en un botón. ¿Alguna idea de cómo eliminar eso para que el botón funcione como un enlace incluso cuando se hace clic en él?

HTML

  

CSS

 button { background:none!important; color:inherit; border:none; padding:0!important; font: inherit; /*border is optional*/ border-bottom:1px solid #444; cursor: pointer; } 

Ver demostración (en JSfiddle)

El código de la respuesta aceptada funciona para la mayoría de los casos, pero para obtener un botón que realmente se comporta como un enlace necesita un poco más de código. Es especialmente complicado obtener el estilo de los botones enfocados directamente en Firefox (Mozilla).

El siguiente CSS garantiza que los anclajes y los botones tengan las mismas propiedades CSS y se comporten igual en todos los navegadores comunes:

 button { align-items: normal; background-color: rgba(0,0,0,0); border-color: rgb(0, 0, 238); border-style: none; box-sizing: content-box; color: rgb(0, 0, 238); cursor: pointer; display: inline; font: inherit; height: auto; padding: 0; perspective-origin: 0 0; text-align: start; text-decoration: underline; transform-origin: 0 0; width: auto; -moz-appearance: none; -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */ -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */ } /* Mozilla uses a pseudo-element to show focus on buttons, */ /* but anchors are highlighted via the focus pseudo-class. */ @supports (-moz-appearance:none) { /* Mozilla-only */ button::-moz-focus-inner { /* reset any predefined properties */ border: none; padding: 0; } button:focus { /* add outline to focus pseudo-class */ outline-style: dotted; outline-width: 1px; } } 

El ejemplo anterior solo modifica los elementos del button para mejorar la legibilidad, pero también se puede ampliar fácilmente para modificar los elementos de input[type="button"], input[type="submit"] e input[type="reset"] también. También puede usar una clase, si desea que solo ciertos botones se vean como anclajes.

Vea este JSFiddle para una demostración en vivo.

Tenga en cuenta también que esto aplica el estilo de anclaje predeterminado a los botones (por ejemplo, color de texto azul). Por lo tanto, si desea cambiar el color del texto o cualquier otra cosa de anclajes y botones, debe hacerlo después del CSS anterior.


El código original (ver fragmento) en esta respuesta fue completamente diferente e incompleto.

 /* Obsolete code! Please use the code of the updated answer. */ input[type="button"], input[type="button"]:focus, input[type="button"]:active, button, button:focus, button:active { /* Remove all decorations to look like normal text */ background: none; border: none; display: inline; font: inherit; margin: 0; padding: 0; outline: none; outline-offset: 0; /* Additional styles to look like a link */ color: blue; cursor: pointer; text-decoration: underline; } /* Remove extra space inside buttons in Firefox */ input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: none; padding: 0; } 

Si no te importa usar Twitter bootstrap, te sugiero que simplemente uses la clase de enlace .

   

intenta usar el pseudoclass css :focus

 input[type="button"], input[type="button"]:focus { /* your style goes here */ } 

editar en cuanto a enlaces y uso de eventos onclick (no debe usar inline javascript eventhandlers, pero para simplificar, los usaré aquí):

 watch and learn 

con this.href incluso puede acceder al objective del enlace en su función. return false solo evitará que los navegadores sigan el enlace al hacer clic.

si javascript está desactivado, el enlace funcionará como un enlace normal y solo cargará https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link/some/page.php si quiere que su enlace esté muerto cuando js esté desactivado, use href="#"

No puede aplicar estilo a los botones como enlaces de manera confiable en los navegadores. Lo he intentado, pero siempre hay problemas extraños de relleno, margen o fuente en algunos navegadores. Ya sea en vivo dejando que el botón se vea como un botón, o use onClick y preventDefault en un enlace.

Puede lograr esto usando css simple como se muestra en el ejemplo siguiente

 button { overflow: visible; width: auto; } button.link { font-family: "Verdana" sans-serif; font-size: 1em; text-align: left; color: blue; background: none; margin: 0; padding: 0; border: none; cursor: pointer; -moz-user-select: text; /* override all your button styles here if there are any others */ } button.link span { text-decoration: underline; } button.link:hover span, button.link:focus span { color: black; }