按钮颜色样式

最新推荐文章于 2024-08-05 22:33:52 发布

转载最新推荐文章于 2024-08-05 22:33:52 发布 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shy1766IT/p/11234776.html

文章标签：

#javascript #ViewUI

本文详细介绍了 Element UI 中不同状态按钮的颜色样式配置，包括主要按钮、成功按钮、警告按钮等，并提供了具体的 CSS 样式代码。此外还解释了警告按钮在悬停和焦点状态下的样式变化。

按钮颜色样式

.el-alert--success {
background-color: #e7faf0;
color: #13ce66;
}

.el-alert--warning {
background-color: #fff8e6;
color: #FFBA00;
}

.el-alert--info {
background-color: #f4f4f5;
color: #909399;
}

.el-button--primary {
color: #FFFFFF;
background-color: #1890ff;
border-color: #1890ff;
}

.el-button--success {
color: #FFFFFF;
background-color: #13ce66;
border-color: #13ce66;
}
.el-button--danger {
color: #FFFFFF;
background-color: #ff4949;
border-color: #ff4949;
}
.el-button--warning:hover, .el-button--warning:focus {
background: #ffc833;
border-color: #ffc833;
color: #FFFFFF;
}

转载于:https://www.cnblogs.com/shy1766IT/p/11234776.html