CSS3語音按鈕效果是一種令人驚嘆的效果，可以為您的網站添加一個新穎的功能。這種效果利用了CSS3的較新特性，在網頁上添加了一個可點擊的語音按鈕，當用戶點擊它時會發出聲音，特別適合于音樂、游戲和娛樂類的網站。

.button{
background-color: #00BCD4;
color: #fff;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
border: none;
font-size: 20px;
}
.button:hover{
background-color: #0097A7;
}
.button:active{
background-color: #00796B;
}
.button:focus{
outline: none;
}
.button:before{
content: "\f028";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.button:hover:before{
animation: shake 0.5s ease;
animation-iteration-count: 1;
}
@keyframes shake{
from{
transform: translateY(-50%) rotate(-20deg);
}
to{
transform: translateY(-50%) rotate(20deg);
}
}

在這段代碼中，我們定義了一個button類，使用背景顏色、邊框、圓角等屬性美化按鈕的樣式。而在:before偽元素中使用Font Awesome字體來添加一個類似于語音圖標的效果。同時，在:hover偽類中添加了一個抖動的動畫效果，讓用戶更容易注意到這個按鈕。

在使用該效果之前，需要先確保在網站中引入了Font Awesome的字體庫。這可以通過在head標簽中添加以下代碼來實現：

當用戶點擊這個按鈕時，可以通過JavaScript的audio屬性來播放音頻文件。在這里我們指定了一個名為"audio"的ID用于播放音效，示例代碼如下：

語音按鈕

這里我們使用了HTML5的audio元素來播放音頻文件，通過ID屬性與JS代碼相連。同時，我們指定了三種不同類型的音頻文件，以便兼容不同的瀏覽器。

如果您的網站需要一個有趣的功能來增強用戶的體驗，那么CSS3語音按鈕效果就是一個很好的選擇。使用這種效果可以簡單快速地創建一個令人印象深刻的語音按鈕，給用戶帶來更加愉悅的體驗。