在網站中，上傳文件的需求是很常見的，為了讓上傳按鈕不再單調而且能夠吸引更多用戶，我們可以添加CSS上傳動畫效果來提升用戶的體驗。

.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #4CAF50;
border-radius: 5px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.button input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.button:hover {
transform: scale(1.1);
}
.button:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
.button:hover:before {
width: 400px;
height: 400px;
opacity: 0;
transition: width 0.5s ease-out, height 0.5s ease-out, opacity 0.5s ease-out;
}

在上述代碼中，我們為上傳按鈕擴展了樣式，通過為按鈕添加偽元素來實現動畫效果。在用戶懸停在按鈕上時，我們使用:before偽元素來制作一個圓形蒙版，可以將光標放到按鈕上輕輕浮動出水波紋的感覺。

當用戶點擊按鈕時，使用絕對定位為按鈕添加input元素，其尺寸與按鈕完全一致。通過設置opacity: 0來隱藏該元素，同時優化了鼠標點擊體驗。

在:hover偽類下，我們添加了一個放大動畫效果，使按鈕在鼠標懸停時更加生動。

最后，通過增加過渡動畫使蒙版圓形變大，逐漸消失，提供更加醒目的上傳動畫效果。