Buttons

There are six buttons: Default, Default Alternative, Modal, Modal Alternative, Large, and Large Alternative. Each one is used differently throughout the checkout process or on forms. 

How to customize buttons

The base styles for the buttons are in system files. These styles cannot be edited directly, but any styles in your CSS file easily overwrite them.

We strongly recommend having a primary button color for main actions, such as purchasing, and a secondary button color for less important actions. All normal buttons should have the primary button color, and all alternative buttons should have the secondary color. 

The HTML for the default button looks like this:

<button type="submit" value="submit" class="defaultBtn"><span>Add To Cart</span></button>

The CSS classes for the buttons are as follows:

/* Default Button Styles */
button.defaultBtn { }
button.defaultBtn span { }

/* Alternative Button Styles */
button.altBtn { }
button.altBtn span { }

/* Modal Button Styles */
button.modalBtn { }
button.modalBtn span { }

/* Modal Alt Button Styles */
button.altModalBtn { }
button.altModalBtn span { }

/* Large Button Styles */
button.largeBtn { }
button.largeBtn span { }

/* Link Button Styles */
a.linkBtn { }
a.linkBtn span { }

/* Link Alt Button Styles */
a.linkAltBtn { }
a.linkAltBtn span { }

/* Modal Link Button Styles */
a.modalLinkBtn { }
a.modalLinkBtn span { }

/*  Modal Link Alt Button Styles */
a.modalLinkAltBtn { }
a.modalLinkAltBtn span { }

/*  Large Link Button Styles */
a.largeLinkBtn { }
a.largeLinkBtn span { }