Comment positionner une image à l'intérieur d'un bouton ?

Question

J'ai ce bouton, et je veux mettre une image à gauche, et il doit y avoir un texte.

que je peux positionner comme je le souhaite à l'intérieur du bouton. J'ai essayé plusieurs façons mais je n'ai pas réussi à positionner

le texte et l'image comme je le souhaitais.

 <button class ="buttn"> Click Here <img src ="./logo.png"> </button>

Answer 1

.buttn{
    background:transparent url(/logo.png) no-repeat left;
    border:0;
    padding-left: xxxpx; // this is how wide the image is plus any additional padding
}

<button class="buttn">Click Here</button>

Le chemin doit être remplacé par le chemin correct. En gros, définissez l'image comme arrière-plan, supprimez tout style de bouton par défaut, puis jouez avec le remplissage jusqu'à ce que vous positionniez le texte comme prévu.

Multiples :

.buttn{
    background-image:url(/logo.png), url(/gradient.png);
    background-repeat:no-repeat, repeat-x;
    background-position:center left, center left;
}

Il n'est pas nécessaire d'utiliser une image pour le dégradé, d'ailleurs. Je montre simplement qu'il est possible d'avoir plus d'un arrière-plan.

Answer 2

Je n'ai jamais mis d'image dans un bouton. Je suppose qu'il ne l'affiche pas. Dans ce cas, mettez le bouton dans une div avec float left (ou les mêmes dimensions que le bouton) et position relative. Positionnez l'image en position absolue à l'endroit voulu. Utilisez le padding dans le bouton pour pousser le texte dans la direction que vous souhaitez. Si le padding ne fonctionne pas, enveloppez le texte dans un span et positionnez-le en AP.

La réponse de Kai est plus propre si elle fonctionne dans tous les navigateurs.