純 CSS 製作按鈕波浪效果 (Google Material Style)
按鈕波浪效果可提升用戶的互動體驗，亦可以為版面增加一點動態元素。本篇會為大家介紹，只透過 CSS，製作如以下效果的按鈕 (Button)：
HTML
<div class="form">
<button>Click Me</button>
</div>CSS
.form {
height: 80px;
background-color: #F5F2F0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
button {
border: none;
outline: none;
background-color: #5fa8d3;
color: #ffffff;
width: 25%;
height: 40px;
border-radius: 5px;
position: relative;
overflow: hidden;
font-size: 16px;
cursor: pointer;
}
button::before {
content:'';
position: absolute;
background-color: #eee;
padding: 50%;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
opacity: 0;
transition: transform .6s, opacity 1s;
}
button:active {
background-color: #2a5d7a;
}
button:active::before {
transition: 0s;
opacity: .6;
transform: translate(-50%, -50%) scale(0);
}form 的 CSS 設定主要是令到例子中的按鈕水平及垂直置中於表格中，若想了解更多可參考：利用 CSS Flexbox 實現垂直及水平置中
button 的 CSS 設定主要是美化按鈕的外觀，可按需要修改。不過不可忽略設定 position: relative 及 overflow: hidden，因為這是達到完成效果的關鍵。
波浪原理是當按鈕被按下 (active) 並放開時 ，一個圓型圖案會由中心由小變大 (scale)、由深到淺 (opacity) 漸變。
上述的圓型圖案可透過為 button 建立 ::before 偽元素 (pseudo-element)。在正常狀態時，圓型圖案是透明 (opacity: 0) 及覆蓋整個 button 的大小。當按下按鈕時，圓型圖案就會縮至最小 (scale(0)) 及非全透明 (opacity: .6)。當放開按鈕時，圖型就會動態地以設定的時間由按下狀態漸變回正常狀態，亦即是由小變大 (scale) 及 由深變淺 (opacity) transition: transform .6s, opacity 1s