Ajouter une image à un bouton

Commenter

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

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (PascalCmoa)