"Debottonizzare" i button in HTML

Indipendentemente dal fatto che utilizzando CSS possiamo "travestire" un elemento HTML in modo che questo sembri e si comporti (mimesi) come un altro, esistono casi specifici in cui è certamente meglio sfruttare direttamente l'elemento HTML necessario, piuttosto che forzarne un altro ad agire allo stesso modo. Tuttavia, esistono altrettanti casi in cui un elemento HTML non è abbastanza malleabile per il compito richiesto. E' questo il caso, ad esempio, dell'elemento button.

Gli elementi button possono essere stilizzati, ma sono difficilmente de-stilizzabili. Ad esempio, se hai mai utilizzato qualcosa come Normalize.css, avrai sicuramente notato il grande numero di regole utili a convertire button in una componente cross-browser: padding, borders, colori, hovering, focus, e cosi via. Inoltre, se il pulsante in questione non deve comportarsi tale è possibile trattarne il suo testo come se fosse, ad esempio, un elemento inline (come uno "span" o un "a").

Tuttavia, non è possibile utilizzare display: inline; su di un button senza contraddire le specifiche HTML standard, le quali affermano che un button deve comportarsi come un elemento "inline-block"

Un codice CSS come quello presentato su CodePen da Micah Godbolt non è quindi totalmente conforme alle specifiche:

]button {
  margin: 0;
  padding: 0;
  color: green;
  white-space: normal;
  display: inline;
  background: none;
  outline: none;
  border: none;
  text-align: left;
}

In questo caso il button si comporta come un link, senza però essere un link. Se l'utente clicca sul pulsante, un JavaScript inline azionerà un alert.

<button onClick={alert('clicked')}> I'm a button and I want to
look like normal link but i keep wrapping and breaking</button>

La soluzione presentata da Matt Mastracci consiglia di includere un elemento "span" con gli attributi HTML "role" e "tabindex" rispettivamente impostati su "button" e "0", più il gestore degli eventi specifico:

più un JavaScript aggiuntivo che permette al pulsante di essere attivato attraverso le azioni della testiera, come Space ed Enter.

Scott O'Hara ha provato a fornire un'alternativa, utilizzando sia la proprietà "display" settata al valore "contents", sia la proprietà CSS "all" settata ad "unset". In questa pagina potete vedere i risultati dei test, che utilizzano sia la proprietà "display" con ogni valore possibile, sia all:unset, testandola con svariate versioni dei browser Firefox e Chrome per Mac e Windows.