Buttons

As you know, buttons are an important part of any site! You can add buttons by dragging and dropping the button element from the elements tab in the left hand side bar of the builder. Clicking the cog on the button element will allow you to quickly access the button alignment settings. You can also access the button form from the first tab in the toolbar. Opening the button form will open up formatting options to choose from such as button sizes. In the button form you can also specify the button text, title, and where it links to. 

You can link a button to:

• an outside source
• an internal website page
• a phone number
• an email address
• an anchor
• code

You also have the option to turn it into a block button. Once you have made all your changes, you can update your button. 

If you look at the classes in the outer and inner divs of the buttons, you will see native Leiout classes and bootstrap classes defining the button styles. 

You can change the Bootstrap classes or add other custom classes to change their style. Since Leiout comes with Bootstrap libraries built in, the default buttons look like this...

However, we created a SASS file specifically for buttons to make it easy to change the style of the buttons site wide by simply changing the variables for the different button types. Any other specific button classes can be defined in this SASS file or in the global CSS.