CSS是一種強大的樣式表語言，可以通過它將網頁設計得更加美觀。今天，我們來學習一下如何將按鈕繪制成同心圓。

.btn {
display: inline-block;
padding: 12px 24px;
background-color: #007bff;
color: #fff;
font-size: 16px;
text-align: center;
border-radius: 50%;
box-shadow: inset 0 0 0 3px #fff;
margin: 20px;
transition: all 0.3s ease-in-out;
}
.btn:hover {
box-shadow: inset 0 0 0 6px #fff;
background-color: transparent;
color: #007bff;
}

以上是我們繪制同心圓按鈕的CSS代碼。首先，我們將按鈕設置為display:inline-block，這樣按鈕才能享受到border-radius:50%;屬性的圓形效果。接著，我們設置padding、background-color、color等基本樣式。之后，為了使按鈕呈現出同心圓效果，我們制作了一個圓形陰影，并在圓形邊緣進行了白色描邊。

最后，我們在:hover偽類中，逆置按鈕的顏色與原來的背景色，還將描邊的寬度加倍，讓按鈕的白色描邊可以更加顯眼。通過這樣的設置，我們可以在用戶懸停在按鈕上時，增加了用戶對按鈕的點擊欲望，讓網站交互更加流暢。

以上就是如何將按鈕繪制成同心圓的代碼實現方法，您可以在項目中使用這些代碼，讓網頁設計更加美觀。