"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 span role tabindex button

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.