CSS矩形切換按鈕是一種常用的網(wǎng)頁元素，它能夠優(yōu)雅地實(shí)現(xiàn)頁面內(nèi)容的切換效果。在本文中，我們將介紹如何使用CSS3代碼創(chuàng)建矩形切換按鈕。

// HTML代碼
<div class="box">
<div class="button">
<div class="btn-inner"></div>
</div>
</div>
// CSS代碼
.box {
width: 200px;
height: 200px;
position: relative;
}
.button {
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ccc;
cursor: pointer;
}
.btn-inner {
width: 50px;
height: 50px;
position: relative;
background-color: #fff;
transition: transform .3s ease-in-out;
}
.button.active .btn-inner {
transform: translateX(50px);
}

在上述代碼中，我們首先創(chuàng)建一個class為box的容器元素，并給它設(shè)定寬度和高度。接著，我們創(chuàng)建了一個class為button的按鈕元素，它處于容器元素的中心位置，并設(shè)定寬度、高度、背景顏色和鼠標(biāo)指針樣式。在按鈕元素的內(nèi)部，我們創(chuàng)建了一個class為btn-inner的子元素，它的寬度和高度與按鈕元素相同，并設(shè)定了背景顏色。

接下來，我們通過CSS3的translate屬性實(shí)現(xiàn)了按鈕元素和子元素的居中效果。然后，我們通過CSS3的transition屬性和translateX屬性實(shí)現(xiàn)了矩形切換按鈕的動畫效果。最后，在HTML代碼中添加class為active的樣式類，就可以實(shí)現(xiàn)按鈕的矩形切換效果了。

以上就是使用CSS3代碼創(chuàng)建矩形切換按鈕的詳細(xì)步驟，希望對大家有所啟發(fā)。