上架下架按鈕是電商網(wǎng)站中常見的一個組件，主要用于商品的上下架操作。下面我們將一步步介紹如何使用 CSS 實(shí)現(xiàn)上架下架按鈕的樣式。

/* 基本樣式 */
button {
padding: 10px 16px;
background-color: #eee;
border: none;
cursor: pointer;
outline: none;
}
/* 初始狀態(tài)的按鈕 */
button.status-0:before {
content: "下架";
color: #f00;
}
button.status-0:hover {
background-color: #ccc;
}
/* 點(diǎn)擊后的按鈕 */
button.status-1:before {
content: "上架";
color: #0f0;
}
button.status-1:hover {
background-color: #ccc;
}
/* 上架狀態(tài)的按鈕 */
button.status-2:before {
content: "已上架";
color: #0f0;
}
button.status-2:hover {
background-color: #ccc;
}
/* 下架狀態(tài)的按鈕 */
button.status-3:before {
content: "已下架";
color: #f00;
}
button.status-3:hover {
background-color: #ccc;
}

我們首先定義了一個基本的樣式，包括內(nèi)邊距、背景顏色、邊框、光標(biāo)和輪廓線。

接下來，我們?yōu)椴煌瑺顟B(tài)的按鈕設(shè)置了不同的樣式。當(dāng)按鈕處于初始狀態(tài)時，它顯示為“下架”并且顏色為紅色。當(dāng)鼠標(biāo)懸停在按鈕上時，它將顯示為灰色。當(dāng)按鈕被點(diǎn)擊時，它將顯示為“上架”并且顏色為綠色。

當(dāng)商品已經(jīng)上架時，按鈕將顯示為“已上架”并且顏色為綠色。當(dāng)商品已經(jīng)下架時，按鈕將顯示為“已下架”并且顏色為紅色。

因此，我們可以通過上述 CSS 樣式來實(shí)現(xiàn)一個漂亮的、具有不同狀態(tài)的上架下架按鈕。