警报按钮

---

了解如何使用 CSS 设置"警报"按钮的样式。

---

Success Info Warning Danger Default
亲自试一试 »

---

如何设置警报按钮的样式

步骤 1) 添加 HTML:

实例

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

---

步骤 2) 添加 CSS:

实例

.btn {
  border: none; /* 移除边框 */
  color: white; /* 添加文本颜色 */
  padding: 14px 28px; /* 添加一些填充 */
  cursor: pointer; /* 在鼠标悬停时添加指针光标 */
}

.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;} 亲自试一试 »

转到我们的 CSS 按钮教程，了解有关如何设置按钮样式的更多信息。