在網頁設計中，美觀的按鍵樣式能夠吸引用戶的注意力，提高網站的易用性。下面介紹一些好看的按鍵樣式。

/* 圓角矩形按鍵樣式 */
.button {
display: inline-block;
padding: 12px 24px;
border: 2px solid #008CBA;
border-radius: 25px;
font-size: 18px;
font-weight: bold;
color: #008CBA;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
color: #fff;
background-color: #008CBA;
}
/* 長方形按鍵樣式 */
.button-rect {
display: inline-block;
padding: 12px 24px;
border: 2px solid #008CBA;
border-radius: 0;
font-size: 18px;
font-weight: bold;
color: #008CBA;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button-rect:hover {
color: #fff;
background-color: #008CBA;
}
/* 扁平化按鍵樣式 */
.button-flat {
display: inline-block;
padding: 12px 24px;
border: 2px solid transparent;
border-radius: 0;
font-size: 18px;
font-weight: bold;
color: #008CBA;
background-color: transparent;
cursor: pointer;
transition: border-color 0.3s ease, color 0.3s ease;
}
.button-flat:hover {
border-color: #008CBA;
color: #008CBA;
}
/* 帶圖標的按鍵樣式 */
.button-icon {
display: inline-block;
padding: 12px 24px;
border: 2px solid #008CBA;
border-radius: 25px;
font-size: 18px;
font-weight: bold;
color: #008CBA;
background-color: transparent;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button-icon:hover {
color: #fff;
background-color: #008CBA;
}
.button-icon i {
margin-right: 10px;
}

以上是一些常見的好看的按鍵樣式，可以根據實際情況進行調整和適配，讓網頁更美觀和易用。