CSS3光暈按鈕是一個非常炫酷的網(wǎng)頁設(shè)計元素，它可以使按鈕或者其他元素在被選中時顯示出明亮的光暈效果，讓網(wǎng)頁看起來更加動感和有趣。下面我們來看看如何使用CSS3制作光暈按鈕。

.btn {
display: inline-block;
padding: 12px 24px;
background: #f96a6a;
border-radius: 50px;
color: #fff;
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0px;
height: 0px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 1;
}
.btn:focus:after {
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s ease;
}

我們首先給按鈕定義了一些基本的樣式，例如背景顏色、邊框半徑、文本顏色等等。然后我們使用偽元素:after來創(chuàng)建了一個背景為半透明白色的圓形，它的位置在按鈕中央。這個圓形是隱藏的，只有在按鈕被選中（即獲得焦點）之后才會顯示出來。

當(dāng)按鈕被選中后，我們使用:focus偽類來為按鈕添加樣式，并為圓形逐漸增加了寬度和高度，同時逐漸調(diào)整透明度，最終實現(xiàn)了一個明亮的光暈效果。

這就是制作CSS3光暈按鈕的基本方法，感興趣的話可以通過各種調(diào)整樣式參數(shù)來改變光暈的顏色、大小、形狀和速度，創(chuàng)造出各種各樣的效果。