만들기: 로드 버튼

로드 버튼 스타일 설정 방법

第一步 - HTML 추가:

아이콘 라이브러리를 추가하고 HTML 버튼에 아이콘을 연결하세요:

<!-- 아이콘 라이브러리 추가 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 버튼에 Font Awesome 아이콘 추가（fa-spin 클래스가 아이콘을 회전시킵니다.）-->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading
</button>

第二步 - CSS 추가:

/* 버튼 스타일 설정 */
.buttonload {
  background-color: #04AA6D; /*緑색 배경 */
  border: none; /* 경계선 제거 */
  color: white; /* 흰색 텍스트 */
  padding: 12px 16px; /* 일부 내간격 */
  font-size: 16px /* 폰트 크기 설정 */
}

직접 시도해 보세요

관련 페이지

가이드:아이콘 가이드

가이드:CSS 버튼

가이드:CSS 로더를 만들기