如何做 - 警報按鈕
瞭解如何使用 CSS 設定“警報”按鈕的樣式。
自己動手試一試 »
如何設定警報按鈕的樣式
步驟 1) 新增 HTML
示例
<button class="btn success">成功</button>
<button class="btn info">資訊</button>
<button class="btn warning">警告</button>
<button class="btn danger">危險</button>
<button class="btn default">預設</button>
步驟 2) 新增 CSS
示例
.btn {
border: none; /* 移除邊框 */
color: white; /* 新增文字顏色 */
padding: 14px 28px; /* 新增一些內邊距 */
cursor: pointer; /* 滑鼠懸停時新增指標游標 */
}
.success {background-color: #04AA6D;} /* 綠色 */
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;} /* 藍色 */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /* 橙色 */
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /* 紅色 */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /* 灰色 */
.default:hover {background: #ddd;}
自己動手試一試 »
訪問我們的 CSS 按鈕教程，瞭解更多關於如何樣式化按鈕的資訊。
