在網頁開發中，我們經常需要添加各種各樣的元素，其中播放按鈕是很常見的元素之一。下面我們來看一下如何使用CSS制作一個漂亮的播放按鈕。

.play-btn {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.play-btn::before {
content: '';
position: absolute;
top: 25%;
left: 35%;
border-style: solid;
border-width: 12px 0 12px 24px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
}
.play-btn::after {
content: '';
position: absolute;
top: 18px;
left: 32px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 24px;
border-color: transparent transparent transparent #fff;
}
.play-btn:hover {
background-color: rgba(0, 0, 0, 1);
}
.play-btn:hover::after {
border-color: transparent transparent transparent #d9d9d9;
}

我們首先定義了一個名為play-btn的類，用于表示該按鈕。我們使用了position屬性來使該元素的定位為相對定位，然后設置寬度和高度為50px，并將其border-radius設置為50%以實現圓形效果。我們使用rgba()函數設置按鈕的背景色為半透明的黑色，并給其添加一個過渡效果，以實現鼠標懸停時的漸變效果。我們還將其光標設置為pointer，當鼠標移動到上面時會變成手型光標，以提示用戶該按鈕可點擊。

接下來我們使用button::before和button::after偽元素來實現該按鈕的箭頭形狀。我們給button::before元素添加一個三角形邊框，其border-width為12px 0 12px 24px時可以實現左上角朝右的三角形。我們設置border-color中的最后一個參數為rgba(255, 255, 255, 0.8)以實現半透明的白色效果。然后我們給button::after元素設置較小的三角形邊框，并用#fff設置其顏色為白色。這樣我們就成功實現了一個漂亮的播放按鈕。

整體CSS代碼中的:hover偽類定義的樣式，將在鼠標懸停時生效，以實現按鈕樣式改變的效果。我們使用border-color來修改箭頭的顏色，實現更好的視覺效果。