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('/img/search.png');
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 :
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
