CSS是一個很強大的前端開發工具，可以實現各種各樣的效果。今天我們就來學習一下如何使用CSS來實現按鈕旋轉的效果。

首先，我們需要定義一個按鈕，可以使用HTML的button標簽：

點擊旋轉

接著，在CSS中定義該按鈕的樣式，并設置按鈕的旋轉效果。使用CSS的transform屬性可以實現該效果。

.rotate-btn {
border: none;
background-color: #f44336;
color: white;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.rotate-btn:hover {
transform: rotate(180deg);
}

在以上代碼中，定義了一個被命名為rotate-btn的按鈕，主要樣式包括：沒有邊框，背景顏色為#f44336，文字為白色，內邊距為10px 20px，字體大小為20px，邊框半徑為5px，鼠標指針樣式為指針。此外，它還有一個transform屬性，控制該按鈕旋轉效果的轉換。transition屬性還可以使按鈕在旋轉時具有動畫效果。在:hover偽類中，我們設置旋轉角度為180度，這將使按鈕旋轉了半個圓圈。

最后，我們需要引用CSS樣式，并在HTML中添加一個類名為rotate-btn的按鈕：

點擊旋轉

現在，我們就可以在瀏覽器中查看效果了。鼠標懸停在按鈕上，它將沿著中心旋轉半個圓圈。在這個簡單的例子中，我們學習了如何使用CSS旋轉按鈕。我們可以使用類似的技術來實現更復雜和炫酷的效果。