이 기사에서는 CSS를 사용하여 이미지 아이콘이 있는 버튼을 만드는 방법을 공유합니다. 내용이 매우 자세하므로 관심 있는 친구가 살펴보세요.
버튼 표면에 이미지 아이콘을 표시할 때 버튼 라벨에 이미지를 표시하는 코드를 작성하세요. 이 효과를 얻으려면 디스플레이가 인라인 블록으로 설정된 스팬 태그를 사용하세요.
코드는 다음과 같습니다:
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>효과는 다음과 같습니다:
위 내용은 CSS로 이미지 아이콘 버튼을 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
