CSS寫按鈕單擊事件是 web 開發中常見的操作之一。在創建頁面時，通過 CSS 來設置按鈕樣式并為按鈕添加單擊事件，可以使網站變得更加美觀和互動性更強。

.btn {
background-color: #0275d8;
color: #fff;
font-size: 18px;
padding: 10px 20px;
border-radius: 5px;
}
.btn:hover {
background-color: #0077cc;
cursor: pointer;
}
.btn:active {
background-color: #004499;
}

上面代碼是一個簡單的按鈕樣式設置。接下來，我們需要添加按鈕單擊事件。使用 CSS 設置按鈕事件的方法是使用“checked”偽類選擇器來控制事件的發生。

<p>請點擊按鈕：</p>
<input type="checkbox" id="btnClick" class="btn"/>
<label for="btnClick">點擊</label>
.btn:checked {
background-color: #5cb85c;
color: #fff;
}
.btn:checked:after {
content: "已點擊";
margin-left: 5px;
}

以上代碼為帶有單擊事件的按鈕代碼。輸入標簽中的“type”屬性被設置為“checkbox”，當勾選 checkbox 后，CSS 中的“checked”屬性會生效，此時按鈕的樣式會發生變化，同時使用偽類選擇器“:after”來使頁面上顯示“已點擊”的字樣。

綜上所述，CSS 寫按鈕單擊事件是一種方便、有效地實現頁面交互的方法。通過創建美觀的按鈕樣式并添加事件，可以使網站變得更加生動、更具活力。