按钮 Button
按钮是为用户提供了触发即时操作的入口。
基本规范
  1. 每个按钮都有一个相对应的操作或流程;如果是导航到另一个页面窗口,请使用链接。
  2. 按钮样式的圆角都是3px。
  3. 按钮有两种,主要和次要。主要按钮为页面上最重要操作,一个模块中(如浮层、表格、表单等)只能有一个主要按钮, 主引导用户的操作行为; 其他的操作皆为次要操作(同时包含禁用按钮与文字链接)。
示例 Examples
基础用法
主要文字按钮 次要文字按钮
主要按钮 default:background:#00B29C; color:#fff; height:34px;
主要按钮 hover:background:#00A28E;

次要按钮 default:background:#fff; border:1px solid #ddd; color:#333; height:34px;
次要按钮 hover:background:#00A28E; border:1px solid #00A28E; color:#00A28E;

不可点击按钮:background:#e6e6e6; color:#ccc; height:34px; cursor:not-allowed;

主要文字按钮 default:color:#00B29C;
主要文字按钮 hover:color:#00A28E; text-decoration: underline;

次要文字按钮 default:color:#333;
次要文字按钮 hover:color:#00A28E; text-decoration: underline;
按钮组
  1. 对话框中的按钮置于左下角,主要按钮居左。例如,“确认”和“取消”。
  2. 指示最常见或最受推荐的操作时,使用主要按钮。
  3. 按钮永远置于对话框顶层,内容出现滚动时不遮挡按钮。

特殊按钮 和 不同尺寸
  1. 在人才列表中显示的按钮圆角更大
  2. 在职位列表中显示的按钮要稍微小一点
  3. 提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
超大按钮:height:40px; font-size:16px;
默认按钮:height:34px;
中按钮:height:30px;
小按钮:height:26px;