如何 - 載入按鈕
瞭解如何使用 CSS 建立載入按鈕。
如何美化載入按鈕
步驟 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 圖示到按鈕 (注意 fa-spin 類會旋轉圖示) -->
<button class="buttonload">
<i class="fa fa-spinner fa-spin"></i>載入中
</button>
<button class="buttonload">
<i class="fa fa-circle-o-notch fa-spin"></i>載入中
</button>
<button class="buttonload">
<i class="fa fa-refresh fa-spin"></i>載入中
</button>
步驟 2) 新增 CSS
示例
/* 樣式按鈕 */
.buttonload {
background-color: #04AA6D; /* 綠色背景 */
border: none; /* 移除邊框 */
color: white; /* 白色文字 */
padding: 12px 16px; /* 一些內邊距 */
font-size: 16px /* 設定字型大小 */
}
自己動手試一試 »
提示：前往我們的 圖示教程 瞭解更多關於圖示的資訊。
提示： 請訪問我們的 如何 - CSS 載入器，瞭解如何使用 CSS（不使用圖示庫）建立載入器。
訪問我們的 CSS 按鈕教程，瞭解更多關於如何樣式化按鈕的資訊。
