CSS3是一種新型的樣式語言，可以為Web頁面帶來許多新的功能和特效。其中，CSS3的按鈕特效非常受歡迎。在本文中，我們將介紹一些常見的CSS3按鈕特效。

/* 1、立體按鈕 */
.button{
background-color: #2f89fc;
color: #fff;
padding: 10px 20px;
border: 1px solid #1e5ab8;
border-radius: 4px;
box-shadow: 0px 2px 0px rgba(0,0,0,0.3);
transition: all 0.1s ease-in-out;
}
.button:hover{
box-shadow: 0px 5px 0px rgba(0,0,0,0.3);
transform: translateY(-3px);
}
/* 2、扁平按鈕 */
.button{
background-color: #fff;
color: #2f89fc;
padding: 10px 20px;
border: 2px solid #2f89fc;
border-radius: 4px;
transition: all 0.1s ease-in-out;
}
.button:hover{
background-color: #2f89fc;
color: #fff;
}
/* 3、圓角按鈕 */
.button{
background-color: #fff;
color: #2f89fc;
padding: 10px 20px;
border: 2px solid #2f89fc;
border-radius: 20px;
transition: all 0.1s ease-in-out;
}
.button:hover{
background-color: #2f89fc;
color: #fff;
}
/* 4、透明邊框按鈕 */
.button{
background-color: #fff;
color: #2f89fc;
padding: 10px 20px;
border: 2px solid transparent;
border-radius: 4px;
transition: all 0.1s ease-in-out;
}
.button:hover{
border-color: #2f89fc;
color: #2f89fc;
}
/* 5、懸停效果按鈕 */
.button{
background-color: #2f89fc;
color: #fff;
padding: 10px 20px;
border: 2px solid #fff;
border-radius: 4px;
}
.button:hover{
background-color: #fff;
color: #2f89fc;
}

這些CSS3按鈕特效可以為Web頁面帶來不同的感覺和風格，通過簡單的調整，我們可以為用戶帶來全新的體驗。