在許多網站中，性別選項是必要的，因此添加性別按鈕是很普遍的。通過CSS，我們可以非常簡單地實現性別按鈕的設計和創建。下面我們將介紹如何使用CSS來創建性別按鈕。

/* HTML代碼 */
男女
/* CSS代碼 */
/* 性別組 */
.gender-group{
display: flex;
justify-content: center;
}
/* 按鈕標簽 */
label{
display: inline-block;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #fff;
background-color: #555;
border-radius: 5px;
margin: 0 10px;
}
/* 鼠標移動到按鈕上的效果 */
label:hover{
background-color: #333;
}
/* 選中的按鈕 */
input[type="radio"]:checked + label{
background-color: #f00;
}

首先，我們的HTML代碼包含了兩個選擇按鈕，一個用于男性，一個用于女性。在CSS部分，我們使用了flexbox布局，將兩個按鈕居中對齊。此外，我們通過label標簽來創建性別按鈕。設置了文本對齊、內邊距、圓角和背景顏色等樣式來使按鈕更加美觀。

接下來，當用戶將鼠標懸停在按鈕上時，我們使用:hover偽類來添加按鈕的鼠標懸停效果。最后，通過:checked偽類（選中按鈕的狀態）來更改選中按鈕的背景顏色，以便用戶清楚地知道他們選擇了哪個性別。

總的來說，通過CSS模板，我們可以輕松地設計出漂亮的性別按鈕，為用戶提供更好的交互體驗。