在CSS中，按鈕的特效給網頁帶來了更好的用戶體驗。在本文中，我們將介紹一些常見的CSS按鈕特效代碼，并通過演示代碼來展示如何實現這些效果。 第一種特效是背景顏色漸變。當用戶將鼠標懸停在按鈕上時，按鈕的背景顏色會漸變。以下是代碼示例：

.btn {
background: #1abc9c;
display: inline-block;
padding: 10px 20px;
color: #fff;
transition: all .3s ease;
}
.btn:hover {
background: #16a085;
}

第二種特效是邊框變化。當用戶將鼠標懸停在按鈕上時，按鈕的邊框顏色會發生變化。以下是代碼示例：

.btn {
border: 2px solid #1abc9c;
display: inline-block;
padding: 10px 20px;
color: #1abc9c;
transition: all .3s ease;
}
.btn:hover {
border-color: #16a085;
color: #16a085;
}

第三種特效是陰影效果。當用戶將鼠標懸停在按鈕上時，按鈕會出現陰影效果。以下是代碼示例：

.btn {
background: #1abc9c;
display: inline-block;
padding: 10px 20px;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
transition: all .3s ease;
}
.btn:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

第四種特效是鍵盤選中效果。當用戶按下按鈕時，按鈕會出現鍵盤選中效果。以下是代碼示例：

.btn {
background: #1abc9c;
display: inline-block;
padding: 10px 20px;
color: #fff;
outline: none;
transition: all .3s ease;
}
.btn:active {
transform: translateY(2px);
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

通過以上示例代碼，我們可以很容易地實現各種按鈕特效。如果您有更多的特效實現，請不要猶豫，與我們分享。