[HTML/CSS] 이미지 버튼(image button)

이미지 버튼(image button)

<button type="button">
  <img src="이미지 파일 경로" alt="대체 텍스트" onclick="" >
</button>

 

버튼 태그의 배경에 이미지를 포함

HTML

<input type="button" class="img-button" onclick="alert('클릭!')">

CSS

input.img-button {
  background: url("https://i.ibb.co/3493r17/cat.jpg") no-repeat;
  width: 180px;
  height: 180px;
}

• background: url() : 버튼 배경 이미지의 경로
• no-repeat; : 배경 이미지를 반복하지 않음
• width: 배경 이미지의 너비
• height: 배경 이미지의 높이