CSS可以讓我們輕松地創建帶有高光的按鈕，這樣的按鈕看起來非常的炫酷，同時也能夠提高網站的用戶體驗。接下來，我們就來學習如何用CSS創建這樣的按鈕。

.button {
background-color: #4CAF50;  /* 設置按鈕的背景顏色 */
border: none;  /* 取消邊框 */
color: white;  /* 設置字體顏色為白色 */
padding: 15px 32px;  /* 設置按鈕內文字的填充 */
text-align: center;  /* 文字居中對齊 */
text-decoration: none;  /* 取消文字的下劃線 */
font-size: 16px;  /* 設置文字大小 */
margin: 4px 2px;  /* 按鈕與其它元素之間的間距 */
cursor: pointer;  /* 鼠標懸停時顯示手型 */
position: relative;  /* 開啟定位，以便設置高光 */
}
/* 定義高光的樣式 */
.button::before {
content: "";
display: block;
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
background: #fff;
border: 2px solid #fff;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
/* 鼠標懸停時顯示高光 */
.button:hover::before {
opacity: 0.5;
}
/* 鼠標點擊時顯示更強的高光 */
.button:active::before {
opacity: 0.8;
}

以上就是創建帶有高光的按鈕的CSS代碼，我們可以將這些代碼應用在我們的按鈕中，輕松創建出非常炫酷的按鈕效果，從而提高用戶對網站的滿意程度。