어떻게 만드는가: 다운로드 버튼

CSS를 사용하여 다운로드 버튼의 스타일을 설정하는 방법을 배웁니다.

자동 너비:

전체 너비:

직접 시도해 보세요

다운로드 버튼을 어떻게 만드는가

第一步 - HTML 추가:

아이콘 라이브러리를 추가하고, HTML 버튼에 아이콘을 추가합니다:

<!-- 아이콘 라이브러리 추가 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 자동 너비 -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- 전체 너비 -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

第二步 - CSS 추가:

/* 버튼 스타일 설정 */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}
/* 마우스��착시 배경 어둡게 변합니다 */
.btn:hover {
  background-color: RoyalBlue;
}

직접 시도해 보세요

관련 페이지

강의:아이콘 강의

강의:CSS 버튼