在網頁設計中，經常需要展示商品列表。在某些場景下，我們需要提供增加商品數量的功能。通過CSS，可以輕松實現這一功能。

/* 定義增加商品數量按鈕的樣式 */
.add-btn {
background-color: #f9a82f;
color: #ffffff;
padding: 3px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* 按鈕變為禁用狀態 */ 
.add-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
/* 定義商品數量的樣式 */
.quantity {
width: 50px;
text-align: center;
}
/* 鼠標移動到增加商品數量按鈕上的樣式 */
.add-btn:hover,
.add-btn:focus {
background-color: #ffd36d;
}
/* 鼠標按下增加商品數量按鈕的樣式 */
.add-btn:active {
background-color: #f47c20;
outline: none;
}

以上代碼定義了增加商品數量按鈕的背景色、顏色、內邊距、邊框、邊角、光標類型等多種樣式。

為商品數量定義了寬度及文字居中樣式，同時還定義了按鈕的禁用狀態樣式。

用戶在鼠標懸浮、聚焦、按下按鈕時，還定義了相應的樣式。

通過以上CSS樣式定義，我們可以實現一個簡單的增加商品數量的功能。并且該功能對用戶來說易于使用，同時也可以提升網頁設計的美感。