CSS中的金屬按鈕是一個非常炫酷的設計元素，它可以用于增強網站的交互性和可視性。下面我們來了解一下如何使用CSS實現金屬按鈕。

.btn {
background-color: #848484;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
height: 40px;
line-height: 40px;
padding: 0 20px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #6c6c6c;
position: relative;
}
.btn:active {
top: 1px;
left: 1px;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn:before {
content: "";
background: #d4d4d4;
border: 1px solid #939393;
border-radius: 5px;
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
z-index: -1;
}
.btn:after {
content: "";
background: #f3f3f3;
border: 1px solid #b0b0b0;
border-radius: 5px;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
z-index: -2;
}
.btn:hover:before {
background-color: #ffc236;
border-color: #ffa500;
}
.btn:hover:after {
background-color: #fff;
border-color: #b0b0b0;
}

以上代碼實現了一個具有金屬效果的按鈕。需要注意的是，在按鈕的偽類:before和:after中，分別定義了兩個圓角矩形，其中一個為淺色，另一個為深色，這樣就產生了具有金屬樣式的效果。

此外，我們還可以通過:hover偽類來實現按鈕的動態效果，例如在鼠標懸停按鈕上方時，按鈕的背景顏色和邊框顏色都會發生變化。