CSS按鈕旋轉(zhuǎn)打開是一種炫酷的交互設(shè)計(jì)，讓網(wǎng)頁更具吸引力和互動性。以下是一個(gè)示例代碼：

.button {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: #333;
color: #fff;
font-size: 16px;
text-transform: uppercase;
border-radius: 5px;
overflow: hidden;
}
.button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
transition: all 0.3s ease-out;
}
.button:hover::before {
width: 500px;
height: 500px;
transform: translate(-50%, -50%) scale(0);
}

首先，我們創(chuàng)建一個(gè)普通的按鈕樣式，并設(shè)置按鈕的描邊、顏色和字體。然后，我們使用偽元素::before來創(chuàng)建一個(gè)背景色為白色的圓形，通過將其定位在按鈕的中心來實(shí)現(xiàn)旋轉(zhuǎn)效果。我們將::before元素的寬度和高度從0變?yōu)?00px，以實(shí)現(xiàn)旋轉(zhuǎn)和擴(kuò)大的效果。最后，我們使用鼠標(biāo)懸停事件來觸發(fā)動畫效果，呈現(xiàn)出一個(gè)生動有趣的按鈕交互體驗(yàn)。