Come rendere il pulsante simile a un collegamento?

Devo fare in modo che un pulsante assomigli a un collegamento tramite CSS. Le modifiche vengono apportate ma quando faccio clic su di esso, viene visualizzato come se fosse premuto come in un pulsante. Qualche idea su come rimuoverlo, in modo che il pulsante funzioni come collegamento anche quando si fa clic?

Il codice della risposta accettata funziona nella maggior parte dei casi, ma per ottenere un pulsante che si comporta davvero come un collegamento è necessario un po 'più di codice. È particolarmente difficile ottenere lo stile dei pulsanti focalizzati direttamente su Firefox (Mozilla).

Il seguente CSS garantisce che le ancore e i pulsanti abbiano le stesse proprietà CSS e si comportino allo stesso modo su tutti i browser comuni:

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

L'esempio sopra modifica solo gli buttonelementi per migliorare la leggibilità, ma può essere facilmente esteso anche alla modifica input[type="button"], input[type="submit"]e agli input[type="reset"]elementi. Puoi anche usare una classe, se vuoi far sembrare solo alcuni pulsanti come ancore.

Guarda questo JSFiddle per una demo live.

Si noti inoltre che questo applica lo stile di ancoraggio predefinito ai pulsanti (ad es. Colore blu del testo). Quindi, se vuoi cambiare il colore del testo o qualsiasi altra cosa di ancore e pulsanti, dovresti farlo dopo il CSS sopra.

Il codice originale (vedi frammento) in questa risposta era completamente diverso 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 non ti dispiace usare Twitter Bootstrap, ti suggerisco di usare semplicemente la classe di 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>

Spero che questo aiuti qualcuno :) Buona giornata!

prova a usare la pseudoclasse css :focus

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

modifica come per i link e l'uso degli eventi onclick (non dovresti usare i gestori di eventi javascript incorporati, ma per semplicità li userò qui):

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

con this.href puoi persino accedere alla destinazione del link nella tua funzione. return falseimpedirà ai browser di seguire il collegamento quando si fa clic.

se javascript è disabilitato, il collegamento funzionerà come un normale collegamento e si caricherà semplicemente some/page.php—se vuoi che il tuo collegamento sia morto quando js è disabilitato usahref="#"

Non è possibile assegnare uno stile ai pulsanti come collegamenti affidabili in tutti i browser. L'ho provato, ma ci sono sempre alcuni strani problemi di riempimento, margine o carattere in alcuni browser. O vivi lasciando che il pulsante assomigli a un pulsante, oppure usa onClick e preventDefault su un link.

È possibile ottenere ciò utilizzando semplici CSS come mostrato nell'esempio seguente

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>