嘻嘻～歡迎來到「30天前端設計之旅」的DAY 24！今天我們將探索更多有趣的文字與按鈕設計技巧，學習如何使用 CSS 實現螢光筆效果、波浪底線、錯位框線按鈕以及漸層按鈕。這些技巧將讓你能夠為網站增添更多的視覺趣味與互動性，提升整體設計質感。

D-24的學習目標：

1. 使用 CSS 製作螢光筆底線效果。
   • 螢光筆樣式的底線效果可以讓關鍵文字更為突出，為文本增添亮眼的標記效果。
   • 對應學習日：第十一天（背景屬性）、第十三天（顯示屬性）。
   • 說明：利用 ::before 偽元素，模擬出文字底下的螢光筆效果，讓重要的文字更為醒目。

<p class="highlighted-text">這是螢光筆底線的文字。</p>

.highlighted-text {
    position: relative;
    display: inline-block;
    font-size: 1.5em;
}

.highlighted-text::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.3em;
    background-color: #ffeb3b; /* 螢光筆顏色 */
    z-index: -1;
}

2. 為文字底部添加波浪線。
   • 波浪線底線能為文字增添動感，適合用在需要更具創意表現的標題或標記上。
   • 對應學習日：第十天（文字屬性）、第十四天（顯示屬性）。
   • 說明：透過 text-decoration 的 wavy 樣式，快速為文字添加動感十足的波浪線。

<p class="wavy-underline">波浪底線效果</p>

.wavy-underline {
    text-decoration: underline;
    text-decoration-color: #5e9ca0;
    text-decoration-style: wavy; /* 波浪線樣式 */
}

3. 創造錯開框線與背景色的按鈕設計。
   • 錯開框線與背景色的按鈕設計能讓你的按鈕更具層次感與視覺趣味，營造出動態的效果。
   • 對應學習日：第十二天（框線屬性）、第十五天（動畫處理）。
   • 說明：使用 ::before 製作錯開的外框，並通過 hover 動作觸發按鈕框線的動態效果。

<button class="offset-border-btn">錯位框線按鈕</button>

.offset-border-btn {
    position: relative;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #b8a29c;
    border: 2px solid #8c8a83;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.offset-border-btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 100%;
    height: 100%;
    border: 2px solid #8c8a83;
    z-index: -1;
    transition: all 0.3s ease;
}

.offset-border-btn:hover::before {
    top: 0;
    left: 0;
}

4. 設計具有漸層效果的按鈕。
   • 漸層按鈕能讓你的網站擁有現代化的設計感，透過顏色漸變效果提升按鈕的質感與吸引力。
   • 對應學習日：第十一天（漸層函數）、第十四天（表格屬性與按鈕樣式）。
   • 說明：linear-gradient 讓按鈕呈現漸變色效果，並結合 hover 實現互動效果的變化。

<button class="gradient-btn">漸層按鈕</button>

.gradient-btn {
    padding: 10px 20px;
    font-size: 1em;
    color: white;
    background: linear-gradient(45deg, #6b9ac4, #b8a29c);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.gradient-btn:hover {
    background: linear-gradient(45deg, #b8a29c, #6b9ac4);
}