CSS3是網(wǎng)頁設(shè)計(jì)中不可缺少的一部分，其中有很多優(yōu)秀的功能和效果，其中之一就是CSS3圓形按鈕光圈效果。本文將介紹如何使用CSS3創(chuàng)建這個(gè)效果。

.btn {
position: relative;
display: inline-block;
padding: 20px;
background-color: #42a5f5;
color: #ffffff;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-radius: 20px;
box-shadow: 0px 3px 0px #1e73be;
}
.btn:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
border-radius: 25px;
box-shadow: 0px 0px 0px 0px #ffffff;
opacity: 0;
transition: all 0.3s;
}
.btn:focus:before {
opacity: 1;
box-shadow: 0px 0px 0px 25px #ffffff;
}

首先，我們定義一個(gè)class為btn的元素，添加一些基本的樣式如背景色、字體顏色等。接下來，我們使用:before偽元素為按鈕添加一個(gè)白色的圓形背景，并設(shè)置opacity為0，這樣最初不會(huì)顯示出來。

然后，在按鈕被選中的情況下，我們改變:before的opacity為1，這樣它就變得不透明了。同時(shí)，我們增加了陰影的大小使其看起來更像一個(gè)圓形的現(xiàn)在。

總之，使用CSS3創(chuàng)建一個(gè)圓形按鈕光圈效果只需要幾行代碼。但是，這個(gè)效果確實(shí)很有用，可以使交互變得更加優(yōu)雅和現(xiàn)代化。希望這篇文章能夠幫助你學(xué)習(xí)如何創(chuàng)建這個(gè)效果。