CSS按鈕點擊打鉤，在前端網頁設計中是一種非常常見的效果。通過在按鈕點擊時添加勾選圖標，即可增強用戶體驗，使用戶能夠直觀地感知到操作已成功完成。下面讓我們來看一下如何實現這種效果。

// HTML代碼：點擊勾選// CSS代碼：
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 0;
height: 0;
border: 2px solid #fff;
border-top: none;
border-right: none;
transition: all 0.3s ease;
}
.btn.clicked::before {
width: 8px;
height: 14px;
border-top: none;
border-right: none;
transform: rotate(45deg);
}

以上代碼中，我們首先定義了一個class為btn的按鈕樣式，并在其偽元素before中添加了一個大小為0的白色三角形。接著，在被點擊時給按鈕添加一個clicked類，并通過修改before偽元素的寬度、高度和旋轉角度，實現了按鈕點擊后出現勾選的效果。

通過以上方式，我們就實現了CSS按鈕點擊打鉤的效果，讓我們的頁面看起來更加美觀和友好。這種效果也可以應用在其它控件上，比如多選框、單選框等。希望本篇文章對您有所幫助！