CSS金屬按鈕是一種常用的設計元素，用于創建具有工業感和現代化感覺的按鈕。在這篇文章中，我們將學習如何使用CSS創建金屬按鈕，以及如何使用預處理器來簡化CSS代碼。

.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
text-transform: uppercase;
background-color: #9b9b9b;
border: 1px solid #6d6d6d;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px #bcbcbc;
transition: all 0.3s ease-in-out;
}
.button:hover {
background-color: #8c8c8c;
box-shadow: inset 0px 0px 10px 1px #bcbcbc;
}
.button:active {
background-color: #7d7d7d;
box-shadow: inset 0px 0px 10px 1px #bcbcbc;
}

上述CSS代碼使用了常見的CSS屬性來創建按鈕的不同樣式。padding屬性用于設置按鈕的內部填充，font-size屬性用于設置字體大小。border屬性用于設置按鈕的邊框樣式，border-radius屬性用于設置邊框圓角。

為了使按鈕看起來像帶有金屬質感，我們使用了box-shadow屬性和inset關鍵字。box-shadow屬性用于在按鈕周圍創建投影效果。inset關鍵字用于使投影效果向內縮進，從而創建出一個看起來更加立體的金屬按鈕。

在:hover偽類和:active偽類中，我們對按鈕的背景色和盒子陰影做了一些微調，使其看起來更加動感和生動。

/* 使用預處理器簡化代碼 */
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
text-transform: uppercase;
background-color: #9b9b9b;
border: 1px solid #6d6d6d;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px #bcbcbc;
transition: all 0.3s ease-in-out;
&:hover, &:active {
background-color: darken(#9b9b9b, 10%);
box-shadow: inset 0px 0px 10px 1px #bcbcbc;
}
}

如果您使用預處理器如Sass或Less，您可以進一步簡化您的CSS代碼。在這個例子中，我們使用了Sass的嵌套語法來創建:hover偽類和:active偽類中的樣式。在嵌套語法中，&代表當前元素，所以我們可以輕松地快速設置按鈕的交互式效果。

通過使用預處理器，您可以大大減少您的CSS代碼量，并讓代碼更為簡潔和易于閱讀。