Details

Style guide for BUTTONS.

Styles That Apply to ALL BUTTON TYPES

• 8px top and bottom vertical padding.
• 16px left and right horizontal padding.
• Minimum 8px spacing between text and icons.
  • When necessary drop downs should include more space between the text and the caret when the button needs to be wider to accommodate the width of dropdown options. Text should be left justified against the padding and caret should be right justified against the padding.
• Carets are always RIGHT JUSTIFIED against the padding.
• Icons are always LEFT JUSTIFIED against the padding.
• 8px spacing between individual buttons.
• 1px border
• Corner Radius = 4px
• No outside shadows on DISABLED, ENABLED, IDLE.
• Small outside shadow on HOVER
• Small inside shadow on CLICK
• 12px Open Sans SimiBold font
• "Title Case" text

Styles Specific to Individual Button Types

Green buttons

1. #91CC93 when DISABLED
2. #5CB85C when ENABLED and IDLE
3. #449D44 on HOVER or IN USE
4. #5CB85C BORDER
5. #FFFFF FONT

Red Buttons

1. #EB99AD when DISABLED
2. #D7335C when ENABLED and IDLE
3. #CC0033 on HOVER or CLICK
4. #D7335C BORDER
5. #FFFFF FONT

Filter - Sort - Page Redirect - Back - All other Line Buttons

1. #CCCCCC Text and Border when DISABLED
2. #FFFFFF background when DISABLED
3. #4a5456 Text and Border when ENABLED and IDLE
4. #FFFFFF Idle Background when ENABLED and IDLE
5. #E6E6E6 Enabled Button Background on HOVER or CLICK
6. #4A5456 Text color on HOVER