在網(wǎng)頁設(shè)計(jì)中，經(jīng)常需要展示商品列表。在某些場景下，我們需要提供增加商品數(shù)量的功能。通過CSS，可以輕松實(shí)現(xiàn)這一功能。

/* 定義增加商品數(shù)量按鈕的樣式 */
.add-btn {
background-color: #f9a82f;
color: #ffffff;
padding: 3px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* 按鈕變?yōu)榻脿顟B(tài) */ 
.add-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
/* 定義商品數(shù)量的樣式 */
.quantity {
width: 50px;
text-align: center;
}
/* 鼠標(biāo)移動(dòng)到增加商品數(shù)量按鈕上的樣式 */
.add-btn:hover,
.add-btn:focus {
background-color: #ffd36d;
}
/* 鼠標(biāo)按下增加商品數(shù)量按鈕的樣式 */
.add-btn:active {
background-color: #f47c20;
outline: none;
}

以上代碼定義了增加商品數(shù)量按鈕的背景色、顏色、內(nèi)邊距、邊框、邊角、光標(biāo)類型等多種樣式。

為商品數(shù)量定義了寬度及文字居中樣式，同時(shí)還定義了按鈕的禁用狀態(tài)樣式。

用戶在鼠標(biāo)懸浮、聚焦、按下按鈕時(shí)，還定義了相應(yīng)的樣式。

通過以上CSS樣式定義，我們可以實(shí)現(xiàn)一個(gè)簡單的增加商品數(shù)量的功能。并且該功能對用戶來說易于使用，同時(shí)也可以提升網(wǎng)頁設(shè)計(jì)的美感。