Knowledge Base

How to create a button

Buttons are elements which can be interacted with by the user (By clicking, rolling over or selecting) in order to trigger an action or link on a website.

Buttons can be made to change their appearance when activated or triggered and almost any element can be made into a button. 

The uses for buttons on a website are almost endless but some examples are: Video player controls, links, site navigation and gallery controls.

1. Design the button using any element you choose. The easiest way to create a simple button is from a text label (Title) with fill and border colours.

2. Add a text Title to your website (this will be the base of your button.

3. Double click the title to edit its text and enter the desired text.

4. Use the Style section of the tool bar to edit the button's style properties like colour fill, border line, text colour, roundness and shadow etc.

 We recommend using colour gradient pre-set colours when creating buttons.

5. After you are done designing the normal state of the button, it's time to design the buttons other states:

  • Selected/Active - When the button is toggled on.
  • Roll-over - When the mouse is over the button.
  • Pressed - When the mouse's left button is held and pressed over the button.

6. Select the button whose design state you want to edit.

7. Select the style tab at the top of the screen (Selected automatically by default) and click states

8. Edit the way the button appears when it is pressed.

9. Edit the way the button appears in each of the design states

10. Your button is now complete, click Preview to view the button you created.

11. If you want to use it again you can save it as a button template.