hey~歡迎來到「30天前端設計之旅」的DAY 26！今天將進一步提升按鈕的創意設計，學習如何製作扭曲的圖形與簡易箭頭按鈕、壓在圖形上面的文字與箭頭按鈕，並探索圓形與線條結合的按鈕設計。這些技巧不僅讓按鈕看起來更具視覺衝擊力，還能讓網站整體設計更具現代感。

D-26的學習目標：

1. 製作扭曲圖形與箭頭按鈕。
   • 這種按鈕打破了傳統的矩形或圓形設計，利用 CSS 變形技術來製作扭曲圖形，並在按鈕中加上簡易箭頭，提升互動感。
   • 對應學習日：第十四天（表格屬性）、第十五天（動畫處理）。
   • 說明：利用 transform: skew() 將按鈕形狀扭曲，讓按鈕呈現出不對稱的動感效果，增加設計趣味。

<button class="twist-btn">探索更多 <span class="arrow">→</span></button>

.twist-btn {
    padding: 15px 30px;
    font-size: 1em;
    color: white;
    background-color: #6c757d;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transform: skew(-15deg); /* 扭曲按鈕形狀 */
    transition: background 0.3s ease;
}

.twist-btn .arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.twist-btn:hover .arrow {
    transform: translateX(5px); /* 滑鼠懸停時箭頭位移 */
}

2. 設計壓在圖形上方的文字與簡易箭頭按鈕。
   • 此設計強調文字與圖形之間的層次感，讓文字和箭頭按鈕壓在圖形上，創造出視覺上的對比效果，適合強調重點內容或呼叫行動。
   • 對應學習日：第十三天（顯示屬性）、第十五天（動畫處理）。
     說明：圖形背景使用 skew() 扭曲，按鈕設置在圖形上方，營造出層次感和立體效果。

<div class="overlay-btn-container">
    <div class="overlay-shape"></div>
    <button class="overlay-btn">開始探索 <span class="arrow">→</span></button>
</div>

.overlay-btn-container {
    position: relative;
    width: 200px;
    height: 100px;
}

.overlay-shape {
    width: 100%;
    height: 100%;
    background-color: #b8a29c;
    transform: skew(-10deg); /* 扭曲背景形狀 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.overlay-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    padding: 10px;
}

.overlay-btn .arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.overlay-btn:hover .arrow {
    transform: translateX(5px);
}

3. 創建圓形與線條結合的按鈕。
   • 這個按鈕使用圓形結合簡單的線條設計，呈現出極簡風格，適合用於極簡設計的網站或導航按鈕。
   • 對應學習日：第十二天（框線屬性）、第十四天（表格屬性）、第十五天（動畫處理）。
   • 說明：通過圓形與線條的結合設計出極簡風格的按鈕，讓整體設計更加現代化。

<button class="circle-line-btn"><span class="line">|</span> 前往 <span class="line">|</span></button>

.circle-line-btn {
    padding: 10px 20px;
    font-size: 1em;
    color: #5e9ca0;
    background-color: white;
    border: 2px solid #5e9ca0;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}

.circle-line-btn .line {
    padding: 0 5px;
    color: #5e9ca0;
}

.circle-line-btn:hover {
    background-color: #5e9ca0;
    color: white;
}