어떻게 만드는가: 아이콘 버튼

아이콘 버튼을 어떻게 만드는가

단계 1 - HTML 추가：

아이콘 라이브러리를 추가하고, 예를 들어 font Awesome를 사용하여 HTML 버튼에 아이콘을 추가하세요：

<!-- 추가 아이콘 라이브러리 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 버튼에 Font Awesome 아이콘 추가 -->
<p>아이콘 버튼:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>텍스트가 있는 아이콘 버튼:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

第二步 - CSS 추가:

/* 버튼 스타일 설정 */
.btn {
  background-color: DodgerBlue; /* 파란 배경 */
  border: none; /* 경계선 제거 */
  color: white; /* 흰색 텍스트 */
  padding: 12px 16px; /* 일부 내간격 */
  font-size: 16px; /* 폰트 크기 설정 */
  cursor: pointer; /* 마우스拘留 시 마우스 포인터 */
}
/* 마우스��착 시 배경 어둡게 변합니다 */
.btn:hover {
  background-color: RoyalBlue;
}

직접 시도해보세요

관련 페이지

教程：아이콘 가이드

教程：CSS 버튼