How to Insert a Button Element on Your Page
To get started, simply drag and drop a Button Element onto your page. There will already be some standard button styles applied to the Button element - feel free to customise them as you would like!
How to change the font of your Button Element
The Button Element makes use of the Google Fonts API to deliver the fonts. Simply start typing the name of a font in the font field for suggestions.
Tips to use the Button Element
Use Columns or the Maximum Width setting to size and position buttons, as shown in our Centering guide.
Enter Button text and links using the text and href fields. If linking to an outside site, be sure to include the full url of the links, including the "https://" or "http://" at the beginning.
Use the Default, Hover, and Active tabs to style button font and backgrounds for different button states.
Use tips from the Mobile Responsive and Centering tutorials to make buttons look good across all screens.
Linking to another Shogun page
If your page was created using Shogun, you can search it right from the Button Link field. Simply start typing your page name and Shogun will start making recommendations based on the pages in your account.
Linking to a non-Shogun page or an external page
Linking to a non-Shogun page or an external page is just as easy. There are a few methods of doing this.
If you are linking within the same site, you can simple add the page path here, for example, "/pages/tours" and this will take the user to your site.
If you are linking to an external site, you will need to include the full URL of the page, including the 'HTTPS' protocol of the URL. The best method of getting this link is to copy it right from the address bar of your browser.
Adding click to call links
Allowing customers to click a button to call your business can be super helpful to direct users to get into contact with you. Please note that this only works on some browsers and mostly only on mobile devices or devices with a calling application installed. To get started, you can set the link to tel:+(country code)(phone number)
Adding click to email links
Allowing customers to click on an email address on your site is helpful for reducing the friction of customers reaching out to you. This is super simple to do with the button element, simple add mailto:youremail@domain.com
Tip: In order to keep your buttons mobile-friendly, avoid adding any large side margins to them. Large side margins can cause elements to appear too narrow or even invisible on smaller screens.
Using a Button to create an Anchor
You may find you want user interaction with the button element to scroll the page up or down for the user to a key section.
You can find instructions on creating anchors here: