在網頁設計中，報警按鈕圖標是一個經常被使用的元素。通過添加簡單的CSS代碼，您可以輕松地創建一個有用且美觀的報警按鈕圖標，它可以用于任何網站或應用程序中。

.alert-button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: red;
color: white;
font-weight: bold;
text-transform: uppercase;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.alert-icon {
display: inline-block;
margin-right: 10px;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 0 2px red;
}
.alert-icon:before {
content: "!";
display: block;
font-size: 16px;
text-align: center;
line-height: 20px;
color: red;
}

上面的代碼定義了一個名為.alert-button的CSS類，它是報警按鈕的容器。樣式包括邊框半徑、背景顏色、文字顏色、字體重量和文本轉換，以及陰影效果。

在容器內部，我們還定義了一個名為.alert-icon的CSS類，它是報警圖標的容器。樣式包括背景顏色、邊框半徑、陰影效果和圖標字體顏色。

為了創建實際的報警圖標，我們使用CSS ::before偽元素添加一個感嘆號符號。我們通過調整字體大小、文本對齊方式和行高來調整圖標的大小和位置。

為了在HTML中使用這些類，您可以創建一個帶有class="alert-button"和在其中嵌套一個class="alert-icon"的元素。在元素內部的文本將被轉換為一個按鈕的標簽。

通過使用這些CSS類，您可以輕松地創建自定義報警按鈕圖標，以根據您的網站或應用程序的需求進行自定義。