Button Design Patterns
The button styles used with Tower are outlined below.
Default Button
The default button is used most often for primary actions. The exception is the call to action button.
DefaultDisabled 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
Padding: .5em 1em
Font size: 1em
Border radius: 2px
Default button color: #C7C7C7
Disabled button color: #BDBDBD
CTA button color: #0088B5
Custom Dropdown
Dropdowns are often used for selections. This will replace the default HTML Select element, which cannot be styled. Dropdowns will need JS to replace the button text after a selection.