All Collections
Element Tutorials
Content
How to use and style buttons in Shogun
How to use and style buttons in Shogun
The button element is a great way to drive your CTA's. This video teaches you how to configure, style and position buttons.
E
Written by Edward Savoy
Updated over a week ago

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.

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)

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.

Did this answer your question?