操作方法 - 警报按钮
了解如何使用 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 按钮教程 了解有关如何样式化按钮的更多信息。
