水墨風格的按鈕一直是網頁設計中非常流行的一種風格，它簡潔而又美觀，給人留下淡雅清新的印象。今天我們來學習一下如何用CSS3實現水墨按鈕動畫。

.button{
position: relative;
display: inline-block;
padding: 15px 30px;
background-color: #FFFFFF;
color: #333333;
font-size: 20px;
font-family: Arial, sans-serif;
text-decoration: none;
overflow: hidden;
transition: all 0.5s ease;
}
.button:before{
content: '';
display: block;
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: rgba(255,255,255,0.2);
transform: translate(-50%, -50%) rotate(45deg);
z-index: -1;
transition: all 0.5s ease;
}
.button:hover{
color: #FFFFFF;
background-color: #333333;
}
.button:hover:before{
transform: translate(-50%, -50%) rotate(45deg) scale(2);
}

首先定義一個button的class，設置基本的樣式，然后設置一個:before偽類，用來實現水墨效果。通過絕對定位，將:before置于按鈕上方并且設置z-index為-1，使其處于按鈕背后。通過transform屬性來調整它的旋轉、縮放和位置等樣式。在按鈕hover時，改變按鈕背景色和字體顏色，同時通過改變:before的transform屬性使水墨效果放大，達到動畫效果。