製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

最近接到一個需求，案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意，指定這個按鈕必須上下不斷彈跳。

這樣的設計的確不錯，因為製作網頁的最終目的，就是讓訪客下定決心並且行動，無論目標是讓訪客購買產品、按讚、或留言聯繫等等，這個行為總稱「行動呼籲」，也就是 Call To Action(CTA)。

讓訪客行動的 CTA 按鈕，站長們需要好好花心思設計，例如尺寸要夠大、顏色夠搶眼，才不會目標族群(Target Audience)想行動時，卻找不到按鈕。

而下面這個依本篇需求做出的上下晃動按鈕，也會是 CTA 按鈕很好的範例：




(圖片出處: pixabay.com)

一、彈跳按鈕效果

1. 到達頁(Landing Page)範例



上圖是一個到達頁範例，銷售頁面最重要的行動呼籲按鈕，從上圖靜態畫面或許沒有十分明顯。不過如果進入該頁面：

• https://clinic.careonline.com.tw

就會看到「登錄診所」按鈕會上下緩慢飄動，真正的顧客絕對會注意到並點擊。


2. 各種彈跳效果

這篇文章介紹了一個整理好的動畫效果庫 animate.css ：

• 微動畫簡單做！使用 animate.css 五秒提升作品質感

只要引用這個 CSS 外連，就有 75 種動畫效果可使用。文章也做了一張動畫效果預覽圖，可快速找到需要的效果來引用。

如果覺得閱讀說明書很麻煩，也可參考以下 WFU 整理的程式碼，不用外掛、使用簡單的 CSS 語法就可做出本篇範例的彈跳效果。

二、範例程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。


1. CSS

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<style>
@keyframes bounce{from{transform:translateY(0px)}to{transform:translateY(-10px)}}
@-webkit-keyframes bounce{from{transform:translateY(0px)}to{transform:translateY(-10px)}}
.bounce {animation: bounce 1s infinite alternate;-webkit-animation: bounce 1s infinite alternate;}
</style>

• 10px 為彈跳的幅度 ，可修改兩處 10px 的數值
• 1s 代表循環的時間為 1 秒，可修改兩處 1s 數值

2. HTML

接著在任何想要顯示上下彈跳按鈕的地方，使用以下 HTML 碼：

<img class="bounce" src="填入圖片網址"/>
如果不是使用圖片 IMG 標籤，請記得把使用的 HTML 標籤加上 class="bounce"才會產生作用。

效果大致像下面這個按鈕：

三、補充說明

開頭有提到客戶希望這個按鈕固定在網頁右下角，這個效果用 CSS 語法就可做到，請讀者參考這篇「快速回到網頁上方 Go Top 按鈕 + 各種動畫效果」，自行修改 CSS 參數即可。