Ajouter une image à un bouton

Contenu du snippet

J'ai lu pas mal de post concernant des personnes désireuses d'utiliser les boutons mais en leur ajoutant une icone pour les rendre plus sympa.

Il existe un moyen en utilisant les ImageButton en placant un texte sous l'image, cette méthode fonctionne parfaitement, certes mais si le texte du bouton peut être modifié pendant l'utilisation de l'appli cela devient un peu complexe à mettre en place.

A force de tester, j'ai trouver une solution.

Source / Exemple :


...
<tr align="center">
   <td align="center" colspan="2">
      <asp:Button ID="btnCherche" 
                  runat="server" 
                  Text=" Rechercher" 
                  style="background:url(images/windows-icones-195_p3.gif);  ' L'image à afficher dans le bouton
                         background-repeat:no-repeat;                       ' Indique que l'image ne sera pas répétée dans le bouton
                         background-position:left;                          ' Indique que l'image sera placée à gauche
                         text-align:right;                                  ' Indique que le texte sera placé à droite
                         padding:5px;                                       ' Indique une zone de 5 pixel autour du texte
                         background-color:#cdcdcd;" />&nbsp;                ' Donne une teinte grise au bouton
      <asp:Button ID="btnNouveau" 
                  runat="server" 
                  Text=" Nouveau" 
                  CausesValidation="False" 
                  style="background-image:url(images/windows-icones-064_p4.gif);  ' Idem bouton précédent
                         background-repeat:no-repeat; 
                         background-position:left; 
                         text-align:right; 
                         padding:5px; 
                         background-color:#cdcdcd;" />
   </td>
</tr>
...

Conclusion :


Le bouton reste à votre convenance. L'utilisation du CSS rend possible une infinité de possibilité.

A vous de jouer maintenant.

A voir également