CSS按鈕特效可以給你的網站帶來一些獨特的視覺效果，從而使其更加吸引人。使用CSS可以制作出不同種類的按鈕，包括圖形按鈕，懸停效果，點擊效果和過渡效果等。在這篇文章中，我們將介紹一些適用于網站按鈕特效的CSS源代碼，這些代碼可以幫助您在您的網站中添加一些獨特的視覺效果。 下面是一些CSS按鈕特效的源代碼，使用時可以直接將代碼復制到您的CSS樣式表中。代碼使用pre標簽來展示。

/* 圓角矩形按鈕 */
.btn {
display: inline-block;
border: none;
padding: 12px 36px;
font-size: 16px;
color: #fff;
background-color: #6a87c3;
border-radius: 30px;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
transition: background-color 0.5s ease;
}
.btn:hover {
background-color: #304858;
}
/* 懸浮按鈕 */
.floating-btn {
position: fixed;
right: 30px;
bottom: 30px;
width: 60px;
height: 60px;
background-color: #6a87c3;
border-radius: 50%;
text-align: center;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
transition: background-color 0.5s ease;
cursor: pointer;
}
.floating-btn:hover {
background-color: #304858;
}
/* 點擊效果按鈕 */
.click-effect-btn {
display: inline-block;
border: none;
padding: 12px 36px;
font-size: 16px;
color: #fff;
background-color: #6a87c3;
border-radius: 30px;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
transition: background-color 0.5s ease;
position: relative;
overflow: hidden;
}
.click-effect-btn:active {
background-color: #304858;
}
.click-effect-btn:after {
content: "";
position: absolute;
background-color: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
}
.click-effect-btn:active:after {
opacity: 1;
}
/* 過渡效果 */
.transition-btn {
display: inline-block;
border: none;
padding: 12px 36px;
font-size: 16px;
color: #fff;
background-color: #6a87c3;
border-radius: 30px;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
}
.transition-btn:hover {
background-color: rgba(106, 135, 195, 0.8);
transition: background-color 0.5s ease;
}

以上代碼中的每個樣式都為不同類型的CSS按鈕特效添加了不同的動態效果。要使用這些樣式，您可以將它們復制到您的CSS樣式表中，并通過為HTML按鈕元素添加相應的類名稱來應用它們。 總之，CSS按鈕特效為網站添加了一些獨特的視覺效果。 這些源代碼可以幫助您為您的網站添加不同類型的按鈕，包括圓角矩形按鈕，懸停效果，點擊效果和過渡效果等。同時，這些源代碼還可以讓您更好地了解CSS的運用，幫助您打造出更加獨具特色的網站。