如何做 - 下載按鈕
瞭解如何使用 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">
<!-- 自動寬度 -->
<button class="btn"><i class="fa fa-download"></i> 下載</button>
<!-- 全寬 -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> 下載</button>
步驟 2) 新增 CSS
示例
/* 樣式按鈕 */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* 滑鼠懸停時背景變深 */
.btn:hover {
background-color: RoyalBlue;
}
自己動手試一試 »
提示：前往我們的 圖示教程 瞭解更多關於圖示的資訊。
訪問我們的 CSS 按鈕教程，瞭解更多關於如何樣式化按鈕的資訊。
