Préférer la balise button à un bouton de formulaire

Est-ce que vous avez déjà tenté de styliser les boutons de formulaires (input type button) ? Si oui, vous savez certainement que ce n'est pas une tâche facile. C'est pourquoi il est préférable et recommandé d'utiliser la balise <button>.

Par exemple, les deux déclarations suivantes sont équivalentes :

<input type="button" id="btn" value="Cliquez moi" />

génère le même genre de bouton que :

<button id="btn">Cliquez moi</button>

Mais comme cette dernière a l'avantage de posséder une balise d'ouverture et de fermeture, il est possible d'y glisser du contenu HTML à l'intérieur (au lieu du value) :

<!-- portion de texte en gras -->
<button>Ceci est un bouton <strong>en gras</strong></button>

<!-- placer une icône dans le bouton, voir plus loin pour stylized -->
<button type="submit"  class="stylized">
  <img src="Images/icons/famfamfam/accept.png" alt=""/>
  Soumettre
</button>

De plus, une balise button n'a pas besoin d'être imbriquée dans un formulaire pour fonctionner, donc on peut l'utiliser dans différents contextes. L'attribut type est optionnel si on compte utiliser celui par défaut (button), mais on peut aussi lui donner les valeurs submit ou reset, qui jouent le même rôle que dans l'input standard.

Finalement, on peut facilement combiner différents éléments pour styliser nos boutons et leurs contenus :

<button style="width:50;height:50;background-color:black; color:white;">
Test
</button>

<button style="background-color:black;">
  <div style="background-color:white; float:left; width:25px;">1</div>
  <div style="background-color:gray; float:left; width:25px;">2</div>
</button>

Appliquer une classe CSS :

button.stylized {
  display:block;
  width:auto;
  font-size:12px;
  font-family:Verdana,Arial,sans-serif;
  font-weight:bold;
  padding:5px 10px 5px 7px;
  color:#686868;
  cursor:pointer;
  line-height:12px;
  margin:0 7px 0 0;
  text-decoration:none;
}

button.stylized img {
  margin:0 3px -3px 0 !important;
}