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!
Méthode d'optimisation du classement des mots clés Baidu SEO
Quelles sont les manières d'exécuter des scripts Shell ?
Que signifie l'accès au réseau refusé au wifi ?
Tutoriel d'utilisation de Kindeditor
Introduction aux types de fichiers
Changer la couleur d'arrière-plan du mot en blanc
tutoriel de flexibilité
Comment résoudre le problème selon lequel TeamViewer ne peut pas se connecter
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
