CSS是我們在網頁設計中必不可少的一項技術。今天，我來分享一種用CSS設置菱形按鈕的方法。

要設置菱形按鈕，我們需要使用CSS的transform屬性。在代碼中，我們可以使用一個含有四個點的偽元素（:before或:after），并使它將一個矩形旋轉45度得到菱形。同時，我們可以設置偽元素的背景色、邊框屬性等，以實現不同樣式。

.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
text-align: center;
font-size: 16px;
color: #fff;
background-color: #3498db;
border: none;
cursor: pointer;
}
.btn:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
transform: rotate(45deg);
background-color: #2980b9;
border: 2px solid #2980b9;
}
.btn:hover:before {
background-color: #fff;
border-color: #3498db;
}
.btn:active:before {
background-color: #3498db;
}

代碼中，我們首先定義了一個.btn樣式，其為一個相對定位的內聯塊元素，設置了一些基本屬性。接著，我們定義了.btn:before樣式，即在.btn中添加一個:before偽元素，使用絕對定位并將其大小與.btn大小一致，使用旋轉讓其呈菱形。

我們還能通過:hover偽類和:active偽類來設置鼠標懸停和按鈕點擊狀態下的樣式，并實現動態效果。

通過以上簡單設置，我們就能輕松地實現一個漂亮的菱形按鈕！