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. 

(Verify WCAG AA passes >)

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",