TABLE OF CONTENTS
Styling for All Buttons
The following Back Office > Theme > CSS Variables apply to all buttons
- "@btn-font-size": "100%",
- "@btn-font-weight": "normal",
Accessibility Tip: When choosing colors for the text and background, keep in mind accessibility standards.
Groups
ACME eCommerce Pages support four types of buttons, grouped according to their function. The color can be modified for each group. Note that all buttons within the group will be the same.
Group 1
These buttons tend to take on a very primary action, particularly around completing an order.
Button(s) | Page Location(s) |
---|---|
"Tickets" | Events List Event Details |
"Join Now" | Membership List Membership Details |
"Place Order" "Add More" | Cart |
"Continue to Payment" "Continue to Order Review" "Complete Order" | Checkout |
"Renew" | My Membership > List of Renew Options |
"Verify" | Verify Membership |
"Cancel Change" | Calendar (Note: only visible if no event in URL) |
CSS Variables for Group 1
- Background Color: "@btn-danger-bg": "#759a27",
- Border: "@btn-danger-border": "transparent",
- Text Color: "@btn-danger-color": "#ffffff",
Group 2
These buttons are for standard actions related to memberships.
Button(s) | Page Location(s) |
---|---|
"Become a Member" | Events List Calendar Cart |
"Verify Membership" "Give as a Gift" | Membership List Membership Details |
"Join Now" "My Membership" | Membership Banner on Events List |
"Renew Options" | My Membership |
CSS Variables for Group 2
- Background Color: "@btn-default-bg": "#747474",
- Border: "@btn-default-border": "transparent",
- Text Color: "@btn-default-color": "#ffffff",
Group 3
These buttons correspond to primary changes you can do to an order.
Button(s) | Page Location(s) |
---|---|
"Select a Date" | Event List |
"Show More Dates" | Calendar |
"Change Date" | Cart - Event |
"Change Membership" | Cart - Membership |
"Edit Order" | Checkout |
CSS Variables for Group 3
- Background Color: "@btn-primary-bg": "#bc9d2a",
- Border: "@btn-primary-border": "transparent",
- Text Color: "@btn-primary-color": "#ffffff",
Group 4
These buttons correspond to undoing actions.
Button(s) | Page Location(s) |
---|---|
"Remove Item" | Cart |
"Cancel Order" | Cart |
CSS Variables for Group 4
- Background Color: "@btn-warning-bg": "#b2322c",
- Border: "@btn-warning-border": "transparent",
- Text Color: "@btn-warning-color": "#ffffff",
Button Color Customizations
Verify Membership Page
The button colors on the Verify Membership page can be individually customized, if desired.
Things to note:
- For the color value, you can either use a reference (e.g. @btn-default-bg) or a color value (e.g. #747474)
- When customizing the border, be sure to specify thickness, style, and color all in a single line
- Example: 1px solid #747474
- Note: This is different than the group CSS variables above, where only the color is specified.
Join Button CSS Variables
- Background Color: "@membership-verify-button-join-bg": "#439899",
- Border: "@membership-verify-button-join-border": "1px solid #439899",
- Text Color: "@membership-verify-button-join-color": "@btn-default-color",
Verify Button CSS Variables
- Background Color: "@membership-verify-button-verify-bg": "@btn-danger-bg",
- Border: "@membership-verify-button-verify-border": "1px solid @btn-danger-border",
- Text Color: "@membership-verify-button-verify-color": "@btn-danger-color",
Cancel Button CSS Variables
- Background Color: "@membership-verify-button-cancel-bg": "#ffffff",
- Border: "@membership-verify-button-cancel-border": "1px solid @btn-warning-bg",
- Text Color: "@membership-verify-button-cancel-color": "@btn-warning-bg",