Buttons are a visually dynamic way to add links to your website. To add a button, drag the Button component to a page of your site in the editor. On the component settings panel there are two basic options you should set for any button:
- Label - Enter text into this field to change what text is shown on the button.
- Link - Click Add Link to set a link for the button.
In addition to the above, there are additional options you can configure for more control.
Size & Position
Within the size and position option group, you’ll see a few different settings:
- Align - Click on the dropdown to change whether the button is aligned to the left, center or right of the component.
- Size - Click on the dropdown to change the size of the button from small, all the way up to huge. You can set a separate size for large and small screens by clicking the desktop/mobile icon.
- Full Width - Toggle this option on to make your button stretch the full width of the component. Click on the desktop/mobile icon to set this separately for large and small screens.
Design
The design option group has one option for Style. By default this is set to standard, which is your site’s default button styling. There are two more choices available: highlight, which uses the secondary color that is set in your Site Settings, and custom, which provides the following options for full styling control:
- Font - Choose from preset options or pick a custom font.
- Shape - Choose from the default for your site or from several other shape options. Click on the desktop/mobile icon to set this separately for large and small screens.
- Text Color - Use the default color or choose a custom color.
- Background - By default this is set to color, but you can also choose a gradient, image, or even no background.
- Border - With this option you can set the thickness of the button border from none to extra large.
Spacing
Within the spacing option group you can set the margins for your button. Margin is the space around the button itself. Click on the desktop/mobile icon to set this separately for large and small screens.
Hover
Click on Hover at the top of the settings panel to control the following hover options of your button:
- Text Color
- Background
- Border
- Scale
Note: The scale option affects the hover size of the button and is based on the size you set for your button. If you choose 125%, then when hovering over the button it will grow to 125% of the original size.