在unigui中使用css

最新推荐文章于 2024-07-12 21:33:34 发布

原创最新推荐文章于 2024-07-12 21:33:34 发布 · 2.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css

unigui 专栏收录该内容

60 篇文章

订阅专栏

本文介绍如何在serverModule中设置unibutton的属性，通过修改CSS样式来定制不同颜色的按钮，包括暗色、红色、绿色、蓝色等，实现美观且响应式的用户界面。

1、在serverModule中设置。

2、设置unibutton的属性extevents中的added事件。

.BotaoEscuro
{
 background:#363636 !important;
 color:#fff !important;
 border-color:#363636;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.BotaoVermelho
{
 background:#d9534f !important;
 color:#fff !important;
 border-color:#d9534f;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.BotaoVerde
{
 background:#5cb85c !important;
 color:#fff !important;
 border-color:#5cb85c;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.BotaoAzul
{
 background:#5bc0de !important;
 color:#fff !important;
 border-color:#5bc0de;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

.BotaoAzulEscuro
{
 background:#337ab7 !important;
 color:#fff !important;
 border-color:#337ab7;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
} 

.BotaoBranco
{
 background:#FFFFFF !important;
 color:#fff !important;
 border-color:#FFFFFF;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}  

.BotaoLaranja
{
 background:#f0ad4e !important;
 color:#fff !important;
 border-color:#f0ad4e;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

结果。