MUKI AI Summary
本文介紹如何使用純 CSS 製作固定於右下角的 CTA 按鈕，無需依賴 JavaScript。主要方法包括使用 CSS 的 `position: sticky` 和 `position: fixed` 屬性來固定按鈕位置，並利用 `place-self: end` 來調整按鈕在網格中的定位。這樣的設計不僅減少頁面載入時間，還能降低維護成本。
此外，文章還介紹了如何使用 CSS 動畫來增強按鈕的視覺效果，透過 `animation-timeline: scroll()` 語法實現平滑過渡效果。由於某些瀏覽器尚未支援該語法，因此使用 `@supports` 進行兼容性檢查。這些技術使得在不使用 JavaScript 的情況下，仍能創建出互動性強且視覺效果豐富的按鈕。...
不知道大家有沒有想過這個問題：如何在不使用 JavaScript 的情況下，做出 CTA (Call-To-Action) 按鈕呢？
這兩天在 Twitter 看到 @jh3yy 大神的發文，實際分享了如何不依賴 JavaScript，純靠 CSS 做到這一切，這樣做不僅可以減少頁面載入時間，還可以減少維護 JavaScript 帶來的時間成本。
@jh3yy 分享了兩種寫法，我實際研究後做成筆記如下，有興趣的朋友可以參考看看。
使用 Sticky 按鈕
這種方式利用 CSS 中的 position: sticky 屬性來固定按鈕的位置，讓它隨著頁面捲動到特定位置後，就固定在螢幕上，讓用戶隨時可以看到它。這樣的按鈕特別適合用於長內容頁面，當用戶捲到某一部分內容時，CTA 自然而然地黏住在視窗中，提供了一個方便的操作入口。
使用 position: sticky
position: sticky 是一個非常有用的 CSS 屬性，當元素滾動到某個閾值時，它可以讓元素「黏住」在頁面的某個位置。這意味著，我們可以讓 CTA 按鈕在滾動到一定位置後保持可見，這在提升用戶體驗上非常有效。
程式碼範例
將網站的 body 設為 display: grid 的佈局，讓主要內容和 CTA 按鈕各自佔據不同的空間，因為主要內容佔據的空間最大，所以 CTA 按鈕只能放在最尾端。
<body>
<div class="content">
<!-- 網站內容 -->
</div>
<button class="cta">Call to Action</button>
</body>body {
display: grid;
grid-template-columns: auto 0;
}
.content {
height: 200vh;
}
.cta {
position: sticky;
margin-top: 100vh;
bottom: 2rem; /* 當到達這個位置後固定 */
place-self: end; /* 將 CTA 按鈕對齊到結尾 */
}接著當捲軸捲到指定位置 (100vh) 時，就利用 position: sticky 讓 CTA 固定在頁面底部，再繼續捲動頁面時，按鈕就會保持在同樣的位置。
使用 place-self: end
我們還使用了 place-self: end 來控制按鈕的位置。
place-self 是 CSS Grid 佈局中的屬性，允許我們快速對齊元素，place-self: end 會讓元素在它所在的網格中對齊到結束位置，這樣可以更加方便地控制按鈕在網格中的定位。
CodePen
▼ 試著滑動捲軸看效果吧
使用 CSS 動畫
如果想要讓按鈕出現時有動畫效果，例如讓按鈕在捲動時逐漸變大，或者加上些平滑過渡的效果，那麼我們可以利用 CSS 動畫的 animation-timeline: scroll() 語法。
animation-timeline: scroll() 的瀏覽器支援度
參考 Can I Use 網站來取得 animation-timeline: scroll() 的瀏覽器支援度，可以看到 Safari 和 Firefox 都尚未支援該語法，所以我們會用 supports 來協助判斷，如果支援才會讓語法生效。
程式碼範例
HTML 部分保持不變
<body>
<div class="content">
<!-- 網站內容 -->
</div>
<button class="cta">Call to Action</button>
</body>CSS 加入了動畫與自定義屬性 (@property)
:root {
--elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
body {
height: 200vh;
}
.cta {
position: fixed;
bottom: 2rem;
right: 2rem;
translate: 0 calc(20vh - (var(--show) * 20vh));
transition: translate 0.875s var(--elastic);
}
@property --show {
syntax: '<number>';
initial-value: 0;
inherits: true;
}
@supports (animation-timeline: scroll()) {
body {
animation: show-cta both steps(1);
animation-timeline: scroll(root);
animation-range: 0 10vh;
}
@keyframes show-cta {
to { --show: 1; }
}
}
動畫步驟說明
首先將 CTA 的位置固定於右下角 (position: fixed)，再搭配這段 CSS 語法：
translate: 0 calc(20vh - (var(--show) * 20vh));
這樣 CTA 的初始位置，就會根據我們自定義屬性 --show 的值而改變，當 --show 的值改變時，按鈕會從初始位置移動到新的位置。
也就是說，按鈕不會一開始就顯示在視窗的右下角，而是會隨著滾動進行平滑移動，直到滾動到特定的位置後按鈕才會完全顯示出來。因此，如果想要讓按鈕始終固定在視窗右下角，可以試著移除 translate 屬性，就能看到按鈕出現了。
接著使用 @property 可以自定義動畫屬性(例如 --show)，並且在 @supports 中檢查瀏覽器是否支援 animation-timeline，這樣我們可以在支援的瀏覽器中使用更流暢的滾動動畫。如果不支援，那麼按鈕還是會有作用，只是少了一段平滑的動畫而已。
CodePen
▼ 試著滑動捲軸看效果吧
結論
以上兩種方法完全不需要 JavaScript，就可以建立一個吸人眼球的 CTA，我們使用 CSS 的 position: sticky 和 position: fixed，搭配 @property 及 CSS 動畫，就能做出效果豐富、互動性強的按鈕，真的不得不讚嘆想出這方法的 @jh3yy。
透過這個範例我也學到很多，關於使用 CSS 來製作視覺上流暢的動畫效果，並且學到如何使用 @property 來自定義動畫屬性，不得不說，CSS 的動畫世界真的是很博大精深！
5
2
1