¿Cómo hacer que el botón parezca 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?

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

El siguiente CSS garantiza que los anclajes y botones tengan las mismas propiedades CSS y se comporten de la misma manera 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 buttonelementos para mejorar la legibilidad, pero también se puede ampliar fácilmente para modificar input[type="button"], input[type="submit"]y input[type="reset"]elementos. También puede usar una clase, si desea que solo ciertos botones se vean como anclas.

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). Entonces, si desea cambiar el color del texto o cualquier otra cosa de los anclajes y botones, debe hacerlo después del CSS anterior.

El código original (ver fragmento) en esta respuesta era 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 le importa usar el programa de arranque de Twitter, le sugiero que simplemente use la clase de enlace .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Espero que esto ayude a alguien :) ¡Que tengas un buen día!

intente usar la pseudoclase css :focus

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

edite en cuanto al uso de enlaces y eventos onclick (no debe usar controladores de eventos javascript en línea, pero en aras de la simplicidad los usaré aquí):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

con this.href puedes incluso acceder al objetivo del enlace en tu función. return falsesolo evitará que los navegadores sigan el enlace al hacer clic.

Si Javascript está desactivado el enlace funcionará como un enlace normal y sólo tiene que cargar some/page.php-si quiere que su enlace sea muerto cuando js es minusválidoshref="#"

No puede diseñar botones como enlaces de manera confiable en todos los navegadores. Lo he intentado, pero siempre hay algunos problemas extraños de relleno, margen o fuente en algún navegador. Vive dejando que el botón se vea como un botón, o usa onClick y preventDefault en un enlace.

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

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;
}

<button type="submit" class="link"><span>Button as Link</span></button>