Maison  >  Article  >  interface Web  >  Comment supprimer la bordure grise des boutons avec des images personnalisées ?

Comment supprimer la bordure grise des boutons avec des images personnalisées ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-28 11:36:38390parcourir

How to Remove the Gray Border from Buttons with Custom Images?

Suppression de la bordure des boutons

Lors de la personnalisation des boutons en remplaçant les images par défaut par des images personnalisées, il est courant de rencontrer une bordure grise persistante autour l'image. Cette bordure peut être supprimée pour obtenir un design de bouton propre et transparent.

Solution

Pour supprimer la bordure grise d'un bouton, ajoutez simplement les styles CSS suivants au code du bouton :

<code class="css">padding: 0;
border: none;
background: none;</code>

Exemple de code

<code class="html"><button style="padding: 0; border: none; background: none;">
  <img src="/path/to/image.png">
</button></code>

Démo

Pour une démonstration en direct, reportez-vous au URL suivante :

https://jsfiddle.net/Vestride/dkr9b/

En appliquant ces styles CSS, le bouton affichera uniquement l'image personnalisée sans aucune bordure environnante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn