CSS3按鈕遮罩是一種常見的按鈕效果，它可以使按鈕在被點擊或懸停時顯示遮罩層，提高用戶交互體驗。下面我們將詳細講解如何使用CSS3實現(xiàn)按鈕遮罩效果。

/* 定義按鈕樣式 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #0070C9;
color: #fff;
border: none;
cursor: pointer;
position: relative;
z-index: 1;
}
/* 定義按鈕懸停時的遮罩層 */
.btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
/* 定義按鈕被點擊時的遮罩層 */
.btn:active::before {
opacity: 1;
}

首先，我們要定義一個按鈕樣式，包括背景色、內邊距、邊框、文字顏色等屬性。我們還要為按鈕添加相對定位和層級，以便后面的偽元素可以作用在按鈕上。

接下來，我們使用偽元素::before來實現(xiàn)遮罩層。遮罩層的顏色使用rgba表示，這樣可以設置透明度。初時，遮罩層的透明度為0，鼠標懸停時它的透明度才會逐漸變?yōu)?.3。注意，遮罩層的z-index屬性要設為-1，這樣它才不會覆蓋按鈕。

最后，我們再添加一個偽類:active，為按鈕添加被點擊時的效果。這時，遮罩層的透明度為1，按鈕的顏色會做出反應。這樣，我們的按鈕遮罩效果就完成了！