越來越多的網站都開始提供在線音樂播放，如何讓用戶更方便地控制音樂的播放是一個值得思考的問題。在這里，我們將介紹如何使用CSS來實現一個音樂播放鍵。

.music-button {
display: inline-block;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
background-color: #f00;
border-radius: 50%;
cursor: pointer;
}
.music-button:before {
content: "";
display: block;
margin: 10px auto;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-left: 18px solid #fff;
border-bottom: 12px solid transparent;
}
.music-button.play:before {
border-left: none;
border-right: 18px solid #fff;
}
.music-button.pause:before {
content: "";
display: block;
margin: 10px auto;
width: 18px;
height: 24px;
background-color: #fff;
}
.music-button:hover {
background-color: #ff0;
}

上面的代碼使用了偽元素: before，利用border屬性構建了三角形和兩個直角矩形拼接而成的播放鍵圖案。同時，我們還設置了play和pause兩個類來實現播放和暫停狀態的效果。當.music-button元素擁有play類時，通過CSS選擇器.music-button.play:before來修改播放鍵的內容和樣式，將左邊的三角形去掉，加上右邊的豎線，形成一個暫停鍵。當.music-button元素擁有pause類時，通過CSS選擇器.music-button.pause:before來修改播放鍵為兩個豎方塊拼接而成的圖案。

最后一點，我們還通過:hover偽類來實現鼠標懸浮時音樂播放按鈕的變化。當鼠標指向按鈕時，其背景顏色會從紅色變為黃色，提醒用戶可以點擊來播放或暫停音樂。