Maison > Article > interface Web > Comment créer un bouton d'icône d'image avec CSS (avec code)

Comment créer un bouton d'icône d'image avec CSS (avec code)

不言original: 2018-11-09 17:47:084128parcourir

Cet article vous expliquera comment utiliser CSS pour créer un bouton avec une icône d'image. Le contenu est très détaillé. Les amis intéressés peuvent y jeter un œil.

Lors de l'affichage d'une icône d'image sur la surface du bouton, veuillez écrire le code pour afficher l'image dans l'étiquette du bouton. Pour obtenir cet effet, utilisez une balise span avec un affichage défini sur un bloc en ligne.

Le code est le suivant :

image-button.css

#buttonImage {
  background-image:url(&#39;/img/search.png&#39;);  
  display:inline-block;  
  margin-top:2px;  
  width:16px;  
  height:16px;
}
.flatbutton{
  border:1px solid #3079ed;  
  background-color:#4d90fe;  
  width:100px;  
  height:28px;
}

image-button.html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="image-button.css" />
</head>
<body>
  <button class="flatbutton"><span id="buttonImage"></span></button>
  </body>
  </html>

L'effet est le suivant suit :

Comment créer un bouton dicône dimage avec CSS (avec code)

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

Article précédent：CSS réalise l'effet du bouton dégradé (exemple de code)Article suivant：CSS réalise l'effet du bouton dégradé (exemple de code)

Comment créer un bouton d'icône d'image avec CSS (avec code)

Articles Liés