瀏覽器播放按鈕在設計和開發網站時扮演著非常重要的角色。但是，很多人可能不知道如何更改它們的樣式。在這篇文章中，我們將介紹如何使用 CSS 更改瀏覽器播放按鈕的樣式。

/* 先隱藏原始的瀏覽器播放按鈕 */
audio::-webkit-media-controls {
display: none !important;
}
/* 設置自定義的播放按鈕 */
.my-audio-button {
display: inline-block;
width: 48px;
height: 48px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 32px;
line-height: 48px;
color: #000;
cursor: pointer;
}
/* 設置播放按鈕的樣式 */
.my-audio-button::before {
content: "\f144"; /* 使用 Font Awesome 圖標 */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 24px;
line-height: 48px;
}
/* 設置播放按鈕的懸停和點擊狀態 */
.my-audio-button:hover {
background-color: #000;
color: #fff;
}
.my-audio-button:active {
box-shadow: none;
transform: translateY(2px);
}

代碼中使用了::-webkit-media-controls這個 CSS 偽元素來選擇瀏覽器播放按鈕。然后，我們使用!important來覆蓋默認樣式，使其隱藏。

接下來，我們定義了一個自定義的播放按鈕，用于替換瀏覽器原始的播放按鈕。通過使用display: inline-block和border-radius: 50%等 CSS 樣式屬性，我們實現了一個圓形的按鈕。

接下來，我們使用 Font Awesome 圖標作為播放按鈕。我們使用::before偽元素將圖標添加到按鈕中，并對其進行樣式設置。

最后，我們還設置了播放按鈕的懸停和點擊狀態。通過改變顏色、去除陰影等樣式，我們使播放按鈕在用戶操作時有更好的視覺反饋。

通過這種方式，我們可以使用 CSS 更改瀏覽器播放按鈕，實現更加自定義化的頁面設計。