Button Design Patterns
The button styles used with MyPanel are outlined below.
Default Button
The default button is used most often for primary actions. Notice the hover state. The exception is the call to action button.
Default ButtonDisabled Button
The disabled button is shown when an action is not available given the current state.
Disabled ButtonCall to Action Button
The call to action button is shown for all actions where we want to encourage the user to invoke. These CTA actions are related to viewing product pages, ordering a product, primary action in the shopping cart, and similar.
CTA ButtonButton Details
Font size: 1em
Font weight: 400
Padding: .4em 1.1em
Border radius: 3px
Default button color: #3575D3 border & text with white background, hover is the opposite
Disabled button color: #A8A8A8 border & text with white background, hover is the opposite
CTA button color: #62BC33 with white text, hover is #8BD331