中英文切換按鈕是網頁設計中的一個重要組件，其樣式也是需要設計師巧妙運用的。

下面給出一個簡單的樣式代碼：

.switch {
display: inline-block;
width: 48px;
height: 24px;
margin: 0;
padding: 0;
position: relative;
border: none;
cursor: pointer;
}
.switch input {
display: none;
}
.switch-label {
display: block;
overflow: hidden;
box-sizing: border-box;
height: inherit;
padding: 0 8px;
font-size: 14px;
line-height: 24px;
text-align: center;
color: #333;
background: #eeeff1;
border-radius: 24px;
user-select: none;
transition: background 0.3s ease;
}
.switch input:checked + .switch-label {
color: #fff;
background: #007aff;
}
.switch-handle {
position: relative;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24);
transition: left 0.3s ease;
}
.switch input:checked + .switch-label + .switch-handle {
left: calc(100% - 24px);
}

在這段 css 代碼中，我們有 switch、switch input、switch-label 和 switch-handle 四個類來控制這個切換按鈕的外觀和行為。switch 類定義了這個按鈕的大小和定位，它的絕對定位和它包含的多個子元素相對定位形成了整個按鈕的形態；switch input 類定義了按鈕中的復選框，讓我們能夠在該標簽中直接添加圖標等其他元素，而不必添加額外的元素；switch-label 類定義了按鈕的文本樣式和背景色；switch-handle 類定義了按鈕的移動狀態。

效果如下：