Navigating Button Element Settings

Button Element

The button element is used as a clickable button within your app. You may link the button to a number of options.

Button Element Settings:

Bold, Italic, Underline, & Strikethough

  • To edit your button text to make it bolded, italicized, underlined, or strikethough, simply click each icon respectively when hovering over the element in the preview screen.

Name

  • The name of your element. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users.
  • To name your element, click the pencil icon in the top of the left menu, and type your new name for the element, and click save.

Font

  • This is the font of your button. By default, the font will be set to your app's Default Font, which can be edited in your account's General Settings.
  • To change fonts, uncheck the box that says "Use the App's Default Font", and click the drop down menu that appears. Select your preferred font from the list of fonts displayed.

Font Size

  • This determines the font size of your button's main text. To edit your button text's font size, use the slider beneath “Font Size” on the left menu, or type in your desired size number. The higher the size, the bigger your font will display on the screen.
  • Note - this will stretch the button vertically to fit the text.

Text color

  • This determines the color of your button's main text. To edit your text color, click the color box underneath where it says “Text Color” on the left menu.
  • As you select and edit your color, you’ll see the preview of it on the text within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

Sub text

  • The sub text is text that appears below your main text on your button. To add sub text to your button, tick the box next to "Sub Text" on the left menu.
  • Note – by default, the sub text box will be unchecked.
  • From here, you can edit the sub text in it's own set of settings separate from the main text.

Link

  • This option allows you to set a link on your button. This means, when an app user taps the button, it will send the user to the link destination. To set a link for your button, identify the drop down menu below “Link” in the left menu. In this drop down area, you will see a number of options to select from to determine the link's destination:

Not set

  • Nothing will happen when tapping the element.

Go to a screen

  • Links to one of your other built screens.
  • A new dropdown menu will appear below, click and select the name of the screen you wish to link to.

Go back

  • Links to go back to the previous screen the app user was on.
  • Functions the same as a back button on a web browser.

Link to a website

  • Links users to an external website off the app. Enter the website URL you’d like to link into the input box right below. 
  • Note - this option will take users outside of your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"
  • Want clients to contact you via Email or Phone Call? Click Here!

Link to a website in app

  • Links users to an external website while staying on your app. Enter the website URL you’d like to link into the input box right below.
  • Note - this option causes a web page to load overtop of your app, though users are still technically on your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Open the popup

  • When tapped, it will open your custom popup made within 22apps.

Open the submenu

  • Links the submenu to appear.

Animation

  • Setting an animation for your element will cause it to load in with a visual effect. 
  • Once the main screen is loaded on a phone, the animation chosen will take place according to your trigger settings. Beneath “Trigger”, you will see a dropdown menu, and an input for for “Minutes” and “Seconds”.
  • To choose an animation for your element, click the drop-down menu below “Trigger" and select an animation.
  • The "Minutes" and Seconds" inputs are used as a timer. Once a screen is loaded on a phone, the timer starts ticking down. When the timer expires, your element's animation will occur.
  • Note - once the animation has started, it will continue on the same timer, no matter if the user leaves the screen or returns to it later.

Background Color

  • To set the background color for your button, click the color box to the left of where it says “Background Color” on the “Appearance” menu on the right side of the page.
  • As you select and edit your color, you’ll see the preview of it within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

Shadow

  • To set a shadow below the button, click the drop down below "Shadow" on the right menu. Select your desired shadow amount.

Opacity

  • Opacity is used to edit your button element’s visibility on the screen. To change the opacity, drag the slider under “Opacity” on the “Appearance” menu on the right side of the page.

Align

  • To align your button to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Text Align

  • To align the text inside your button to the left, center, or right of the button, click the corresponding icons underneath “Text Align” in the “Appearance” menu on the right side of the page.

Width

  • The width setting of a button determines its maximum horizontal width.
  • To edit the width of your button, drag the slider underneath “Width” in the “Appearance” menu on the right side of the page.

Letter Spacing

  • The letter-spacing settings determine the space in between each letter horizontally. To edit your header’s letter spacing, enter the drop-down menu beneath “Letter Spacing” on the “Appearance” menu on the right side of the page. From there, you can select from a variety of letter spacing options.

Border

  • The visual border around your button is determined by a number of factors:

Style

  • To set your border’s style, enter the drop-down menu beneath “Style” on the “Appearance” menu on the right side of the page. You can then select from a list of several border styles.
  • Note – to remove the border, set the border style to “None”.

Border Color

  • To set the color of your border, click the color box next to “Border Color”. Once satisfied, simply click anywhere else on the page to set the color.

Border Size

  • To set the thickness size of your border, enter the drop-down menu beneath “Border Size” on the “Appearance” menu on the right side of the page. You will see a list of several “Point” options. The higher the number is, the thicker the border will be.

Border Radius

  • The radius of your border is used to determine the roundedness of your element. To change your border’s radius, drag the slider under “Border Radius” on the “Appearance” menu on the right side of the page. The higher the number is, the more round your border’s edges will become.

Spacing

  • Spacing is used to generate space around content, inside of an element's area. To edit spacing settings, scroll to the bottom of the “Appearance” menu on the right side of the page to where it says "Spacing". You can edit the spacing of the Top, Bottom, Left, and Right of your element by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the element and the content.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.