CSS按鈕可以給網頁帶來更加生動活潑的效果，而通過點擊按鈕的操作，可以帶來更多的交互性和趣味性。本文章將介紹如何通過CSS實現按鈕的點擊變斜效果。

button {
box-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* 設置按鈕的陰影，讓按鈕更有立體感 */
position: relative; /* 讓按鈕內的元素相對于按鈕進行定位 */
overflow: hidden; /* 隱藏超出按鈕邊框的內容 */
transition: all 0.3s ease-in-out; /* 按鈕變換時的動畫效果 */
}
button::before, button::after {
content: '';
position: absolute;
background: #fff;
transform: skew(20deg); /* 將元素進行傾斜變換 */
transition: all 0.3s ease-in-out; /* 元素變換時的動畫效果 */
}
button::before {
top: -20px; /* 上邊線位置 */
left: -20px; /* 左邊線位置 */
width: 20px; /* 寬度 */
height: 100%; /* 高度 */
}
button::after {
bottom: -20px; /* 下邊線位置 */
right: -20px; /* 右邊線位置 */
width: 100%; /* 寬度 */
height: 20px; /* 高度 */
}
button:hover::before {
left: 100%; /* 鼠標懸停時，讓左邊線移到按鈕右側，達到斜坡效果 */
}
button:hover::after {
top: 100%; /* 鼠標懸停時，讓下邊線移到按鈕上側，達到斜坡效果 */
}
button:active {
top: 2px; /* 激活狀態下，讓按鈕位置稍微下移一點 */
left: 2px; /* 激活狀態下，讓按鈕位置稍微左移一點 */
}
button:active::before {
left: -100%; /* 激活狀態下，讓左邊線移到按鈕左側，達到斜坡效果 */
}
button:active::after {
top: -100%; /* 激活狀態下，讓下邊線移到按鈕下側，達到斜坡效果 */
}

通過上述代碼，我們定義了按鈕的樣式以及按鈕懸浮、點擊時的動畫效果，從而實現了點擊變斜的效果。這樣的效果可以更好地吸引用戶的注意力，提高用戶的交互體驗，使網頁更加生動有趣。