Como fazer o botão parecer um link?

Preciso fazer um botão parecer um link usando CSS. As alterações são feitas, mas quando clico nele, é exibido como se fosse pressionado como em um botão. Alguma idéia de como remover isso, para que o botão funcione como um link mesmo quando clicado?

O código da resposta aceita funciona na maioria dos casos, mas para obter um botão que realmente se comporta como um link, você precisa de um pouco mais de código. É especialmente difícil obter o estilo dos botões focados diretamente no Firefox (Mozilla).

O CSS a seguir garante que âncoras e botões tenham as mesmas propriedades de CSS e se comportem da mesma maneira em todos os navegadores comuns:

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

O exemplo acima modifica apenas buttonelementos para melhorar a legibilidade, mas pode ser facilmente estendido para modificação input[type="button"], input[type="submit"]e input[type="reset"]elementos também. Você também pode usar uma classe, se quiser que apenas alguns botões pareçam âncoras.

Veja este JSFiddle para uma demonstração ao vivo.

Observe também que isso aplica o estilo de âncora padrão aos botões (por exemplo, cor do texto azul). Portanto, se você quiser alterar a cor do texto ou qualquer outra coisa de âncoras e botões, faça isso após o CSS acima.

O código original (veja o snippet) nesta resposta 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;
}

Se você não se importa em usar o twitter bootstrap , sugiro que você simplesmente use a classe link .

<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 isso ajude alguém :) Tenha um bom dia!

tente usar o pseudoclasse css :focus

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

edite como para links e use eventos onclick (você não deve usar manipuladores de eventos javascript embutidos, mas por uma questão de simplicidade, os usarei aqui):

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

com this.href, você pode acessar o destino do link em sua função. return falseapenas impedirá que os navegadores sigam o link quando clicados.

se o javascript estiver desativado, o link funcionará como um link normal e apenas será carregado some/page.php- se você quiser que seu link esteja morto quando o js estiver desativado, usehref="#"

Você não pode estilizar botões como links de maneira confiável nos navegadores. Eu tentei, mas sempre há alguns problemas estranhos de preenchimento, margem ou fonte em algum navegador. Convide para deixar o botão parecido com um botão ou use onClick e preventDefault em um link.

Você pode conseguir isso usando css simples, como mostrado no exemplo abaixo

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>