Button,是一种基础控件,本系统有查询、新增、重置、批量删除、保存、生成、关闭等按钮,不同类型的按钮用不同颜色显示。
按钮 | 描述 |
---|---|
显眼的蓝色来表明在按钮组中是最重要的行为 | |
默认的白底灰边按钮 | |
表明一个危险的或者潜在的有消极意义的行为(比如关闭、批量删除) |
样例
按钮类型
css配置
.button-blue{background-color:#35a0e7;border:1px solid #3199de;color:#fff;padding:5px 10px;_padding:4px 3px 1px 3px;*padding:4px 3px 1px 3px;border-radius:4px; margin:2px 3px 3px 0px;}
.button-red{background-color:#d9534f;border:1px solid #d43f3a;;color:#fff;padding:5px 10px;_padding:4px 3px 1px 3px;*padding:4px 3px 1px 3px;border-radius:4px;margin:2px 3px 3px 0px;}
.button-white{background-color:#fafafa;border:1px solid #ccc;color:#787878;padding:5px 10px;_padding:4px 3px 1px 3px;*padding:4px 3px 1px 3px;border-radius:4px;margin:2px 3px 3px 0px;}
说明
背景颜色#35a0e7;描边1像素、实线、颜色#3199de;文字颜色#fff;内边距上下5像素、左右10像素;圆角4像素;外边距上2像素、右3像素、下3像素;
背景颜色#d9534f;描边1像素、实线、颜色#d43fsa;文字颜色#fff;内边距上下5像素、左右10像素;圆角4像素;外边距上2像素、右3像素、下3像素;
背景颜色#fafafa;描边1像素、实线、颜色#ccc;文字颜色#787878;内边距上下5像素、左右10像素;圆角4像素;外边距上2像素、右3像素、下3像素;
按钮大小
css配置
.button-blue{background-color:#35a0e7;border:1px solid #3199de;color:#fff;padding:5px 10px;_padding:4px 3px 1px 3px;*padding:4px 3px 1px 3px;border-radius:4px; margin:2px 3px 3px 0px;}
.button-red{background-color:#d9534f;border:1px solid #d43f3a;;color:#fff;padding:5px 10px;_padding:4px 3px 1px 3px;*padding:4px 3px 1px 3px;border-radius:4px;margin:2px 3px 3px 0px;}
.button-white{background-color:#fafafa;border:1px solid #ccc;color:#787878;padding:5px 10px;_padding:4px 3px 1px 3px;*padding:4px 3px 1px 3px;border-radius:4px;margin:2px 3px 3px 0px;}
说明
背景颜色#35a0e7;描边1像素、实线、颜色#3199de;文字颜色#fff;内边距上下5像素、左右10像素;圆角4像素;外边距上2像素、右3像素、下3像素;
背景颜色#d9534f;描边1像素、实线、颜色#d43fsa;文字颜色#fff;内边距上下5像素、左右10像素;圆角4像素;外边距上2像素、右3像素、下3像素;
背景颜色#fafafa;描边1像素、实线、颜色#ccc;文字颜色#787878;内边距上下5像素、左右10像素;圆角4像素;外边距上2像素、右3像素、下3像素;
按钮状态