Buttons

There are six different buttons: Default, Default Alternative, Modal, Modal Alternative, Large, Large Alternative. Each one is used in different ways 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 they are easily overwritten by any styles in your own css file.

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 { }

To view a working example of all buttons please visit the our designer launch site.