按鈕是界面交互中常用的元素，但是簡單的按鈕可能過于平凡。一些特效的應用可以為按鈕帶來更加炫酷的視覺效果。其中一種非常流行的效果是展開炸裂效果。這種效果可以在用戶點擊按鈕時，使得按鈕呈現出一種由中心點向四周展開炸裂的效果。這種效果可以使用CSS3動畫實現。

.button {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
color: #FFF;
background-color: #000;
cursor: pointer;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.button.active {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
}
.button.active:before {
content: "";
display: block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFF;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ripple 0.6s linear;
}
@keyframes ripple {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(200);
opacity: 0;
}
}

通過以上代碼，我們可以為按鈕添加一個點擊后的展開炸裂效果。該效果是通過點擊按鈕后切換按鈕的CSS class實現的，即“button”和“button active”兩種樣式。我們可以看到，“button”樣式設置了按鈕的基本樣式，包括圓形、顏色和位置等屬性。同時，“button active”樣式為按鈕添加了點擊后的擴散效果。通過scale屬性使得按鈕放大，同時設置陰影以增加立體感。同時，在點擊后，在按鈕中央添加了一個白色小球，該小球通過animation屬性實現了展開炸裂效果。