CSS按鈕是網(wǎng)站設(shè)計(jì)中非常重要的元素，通過(guò)添加手勢(shì)操作可以增強(qiáng)用戶體驗(yàn)。在移動(dòng)設(shè)備上，用戶通過(guò)觸摸屏幕進(jìn)行操作，而在PC上，用戶通過(guò)鼠標(biāo)進(jìn)行操作。本文將介紹如何使用CSS添加按鈕的手勢(shì)操作。

/* 定義CSS按鈕的樣式 */
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
/* 鼠標(biāo)懸停時(shí)按鈕的樣式 */
.button:hover {
background-color: #0062cc;
}
/* 按鈕被點(diǎn)擊時(shí)的樣式 */
.button:active {
background-color: #005cbf;
}
/* 移動(dòng)設(shè)備中按鈕被觸摸時(shí)的樣式 */
.button:active,
.button:focus {
background-color: #004b9e;
}
/* 設(shè)置手勢(shì)操作 */
@media (max-width: 767px) {
.button {
touch-action: manipulation;
}
}

上述代碼定義了一個(gè)基本的CSS按鈕樣式，通過(guò):hover偽類實(shí)現(xiàn)鼠標(biāo)懸停時(shí)的樣式，通過(guò):active偽類實(shí)現(xiàn)按鈕被點(diǎn)擊時(shí)的樣式。此外，在移動(dòng)設(shè)備中，為了增強(qiáng)用戶體驗(yàn)，我們還需要添加觸摸屏幕時(shí)的樣式。同時(shí)，為了減少移動(dòng)設(shè)備中的卡頓和延遲，我們還使用touch-action屬性來(lái)設(shè)置手勢(shì)操作。

可以使用下面的HTML代碼和CSS樣式代碼創(chuàng)建一個(gè)示例按鈕：

點(diǎn)擊按鈕