button#allButton {
    position: relative;
    min-width: 160px;
    background: transparent;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
}
button#allButton span {
    color: #FFFFFF;
    mix-blend-mode: difference;
}
button#allButton:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 100%;
    border-radius: 50px;
    background: black;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button#allButton:hover:before {
  background: black;
  width: 100%;
}

1. button#allButton：這是CSS選擇器，用於選中具有ID為"allButton"的<button>元素。

2. position: relative;：設置按鈕的定位為相對定位，這意味著按鈕的位置參考自身的位置。

3. min-width: 160px;：設置按鈕的最小寬度為160像素。

4. background: transparent;：將按鈕的背景設置為透明。

5. border: none;：移除按鈕的邊框。

6. border-radius: 50px;：設置按鈕的邊框半徑為50像素，使按鈕呈現圓形外觀。

7. font-size: 1rem;：設置按鈕的字體大小為1rem。

8. font-weight: bold;：設置按鈕的字體加粗。

9. text-align: center;：將按鈕內容居中對齊。

10. text-decoration: none;：移除文本的下劃線。

11. text-transform: uppercase;：將文本轉換為大寫。

12. padding: 10px 20px;：設置按鈕的內邊距，分別為10像素的上下內邊距和20像素的左右內邊距。

13. cursor: pointer;：將滑鼠游標設置為手型，以指示按鈕可以被點擊。

14. button#allButton span：這是對按鈕內的<span>元素進行樣式設置的CSS選擇器。

15. color: #FFFFFF;：設置<span>元素的文字顏色為白色。

16. mix-blend-mode: difference;：使用不同的混合模式來處理元素的內容和背景之間的混合效果。

17. button#allButton:before：這是使用伪元素 ::before 選擇器為按鈕添加一個伪元素，用於實現按鈕的背景動畫效果。

18. content: '';：設置伪元素的內容為空，這是必需的。

19. position: absolute;：將伪元素的定位設置為絕對定位，使其相對於父元素按鈕進行定位。

20. top: 0; 和 left: 0;：將伪元素的位置設置在按鈕的左上角。

21. width: 52px; 和 height: 100%;：設置伪元素的寬度為52像素，高度為100%（與按鈕相同的高度）。

22. border-radius: 50px;：設置伪元素的邊框半徑為50像素，使其呈現圓形。

23. background: black;：設置伪元素的背景顏色為黑色。

24. transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);：設置伪元素的過渡效果，使其在0.85秒內變化，使用自定義的貝塞爾曲線函數。

25. button#allButton:hover:before：這是當滑鼠懸停在按鈕上時應用的CSS規則，用於修改伪元素的背景以實現動畫效果。

26. background: black;：當滑鼠懸停在按鈕上時，將伪元素的背景設置為黑色。

27. width: 100%;：將伪元素的寬度設置為100%，使其從左邊擴展到整個按鈕的寬度，從而創建一個動畫效果。

製作成果如下:

觸發前：

觸發後：