Usage

Initially, you're presented with a choice to select the type of button you prefer, such as a Link Button, Scroll to Section Button, or CTA Button. Depending on your selection, you'll be prompted to add a link, specify an ID for scrolling to a particular section, or choose a CTA.

Following this, you have the option to select the style of the button, opting for either a Fill button or an Outline button. Subsequently, you'll be prompted to choose a background from the dropdown menu, ensuring that each option in the dropdown is presented as a pair, denoting "Background Color - Text Color." For instance, selecting "Accent - Light" would mean selecting the Accent color as the background color and the light color as the text color.

After selecting the background, you'll encounter a size dropdown, allowing you to specify the size of the button, with options including Small, Regular, and

Large.

Finally, you have the choice to include an icon and select its direction, whether it should be positioned on the right or left side of the button.

For usage of CTA

To set up a CTA, start by choosing Link (No Style) as the Button Style in CTA. Then, click on Advanced Options and find the Custom CSS Class field. Simply copy and paste your chosen class from the provided list. Make sure to follow the guidelines and use the listed default and required classes as necessary.

Default Class(Required)*:

btn

Fill/Outline(Required)*:

btn-fill btn-outline

Size(Required)*:

btn-small btn-regular btn-large

Background(Required)*: