部落格質感升級：5 款即用型超連結按鈕 CSS 樣式庫 (附完整程式碼)
超連結是網頁的靈魂，但單純的藍色底線連結，有時難以吸引使用者注意，也無法區分連結的重要性與用途。透過精心設計的 CSS (Cascading Style Sheets) 樣式，我們可以將超連結變身為質感與功能兼具的「按鈕」，不僅能美化版面，更能有效引導使用者進行點擊。
本篇文章將提供一套包含五種不同用途的「膠囊狀」按鈕樣式庫，您可以輕鬆地將它們應用在您的部落格或網站中，立即提升視覺專業度。
如何使用本樣式庫？
- 將文末的「完整 CSS 程式碼」一次性地複製到您網站的自訂 CSS 區域中（例如 Blogger 的「主題」>「自訂」>「進階」>「新增 CSS」）。
- 在撰寫文章時，於 HTML 編輯模式中，參考下方的「HTML 設定方式」來使用您想要的按鈕樣式。
按鈕樣式介紹與使用情境
我們的設計包含一個決定外觀與互動的「基礎樣式」，以及五種賦予不同語意的「顏色樣式」。
1. 主要操作按鈕 (Primary Button)
用途說明： 用於文章中最重要的行動呼籲 (Call-to-Action)，例如「註冊會員」、「立即購買」或引導至最重要的頁面。
HTML 範例：
<a href="#" class="blog-link-pill-base blog-link-pill-primary">註冊會員</a>外觀預覽：
2. 下載/成功按鈕 (Download Button)
用途說明： 帶有正面、成功意味的連結，常用於「下載檔案」、「提交表單」或確認完成某項操作。
HTML 範例：
<a href="#" class="blog-link-pill-base blog-link-pill-download">下載簡報</a>外觀預覽：
3. 外部/附屬連結 (External Button)
用途說明： 用於導向外部網站、次要資訊頁面或合作夥伴連結，橘色能有效與主要操作做出區別。
HTML 範例：
<a href="#" class="blog-link-pill-base blog-link-pill-external">參觀合作夥伴</a>外觀預覽：
4. 參考/內部文章 (Reference Button)
用途說明： 適合用於引導讀者閱讀相關的「內部文章」或「參考資料」，有助於增加網站內部連結與使用者停留時間。
HTML 範例：
<a href="#" class="blog-link-pill-base blog-link-pill-reference">閱讀相關文章</a>外觀預覽：
5. 警告/注意按鈕 (Warning Button)
用途說明： 用於提醒使用者點擊前須「特別注意」的連結，例如「查看注意事項」、「刪除帳號」等具潛在風險的操作。
HTML 範例：
<a href="#" class="blog-link-pill-base blog-link-pill-warning">查看注意事項</a>外觀預覽：
HTML 設定方式
要使用這些按鈕樣式非常簡單。您只需要在標準的 <a> 超連結標籤上，同時加上兩個 class：
- blog-link-pill-base (固定的基礎樣式)
- 您想使用的顏色樣式 (例如 blog-link-pill-primary)
為了讓多個按鈕能美觀地陳列（自動置中並換行），建議將它們全部放在一個 <div> 容器中，並為該容器加上 .blog-link-area 這個 class。
完整 HTML 結構範例
<div class="blog-link-area">
<a href="#" class="blog-link-pill-base blog-link-pill-primary">註冊會員</a>
<a href="#" class="blog-link-pill-base blog-link-pill-download">下載簡報</a>
<a href="#" class="blog-link-pill-base blog-link-pill-external">參觀合作夥伴</a>
<a href="#" class="blog-link-pill-base blog-link-pill-reference">閱讀相關文章</a>
<a href="#" class="blog-link-pill-base blog-link-pill-warning">查看注意事項</a>
</div>完整 CSS 樣式庫
請複製以下所有程式碼，並將其貼到您網站的自訂 CSS 區域。
/* --- Hyperlink Pill Buttons --- */
/* 1. 連結按鈕的容器 */
.post-body .blog-link-area {
padding: 20px 0;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
/* 2. 所有按鈕的共用基礎樣式 */
.post-body .blog-link-pill-base {
display: inline-block;
text-decoration: none;
padding: 8px 15px;
border-radius: 50px; /* 膠囊形狀 */
font-weight: bold;
transition: all 0.3s ease;
border: 1px solid;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 2a. 所有按鈕的滑鼠懸浮效果 */
.post-body .blog-link-pill-base:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
/* 3. 五種獨立顏色樣式 */
/* 3a. 主要操作按鈕 (藍色) */
.post-body .blog-link-pill-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
/* 3b. 下載/成功按鈕 (綠色) */
.post-body .blog-link-pill-download {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
/* 3c. 外部/附屬連結 (橘色) */
.post-body .blog-link-pill-external {
color: #fff;
background-color: #fd7e14;
border-color: #fd7e14;
}
/* 3d. 參考/內部文章 (紫色) */
.post-body .blog-link-pill-reference {
color: #fff;
background-color: #6f42c1;
border-color: #6f42c1;
}
/* 3e. 警告/注意按鈕 (黃色) */
.post-body .blog-link-pill-warning {
color: #212529;
background-color: #ffc107;
border-color: #ffc107;
}
Tags
Blogger技巧