Compatibility:

WebSie X5 Evo and Pro v.2019.3

Buttons are very often used on websites. 


Visitors use the buttons of a website to perform different actions. By selecting a button they can, for instance, open a page, play a video, download a resource, subscribe to a newsletter service, buy a product. 


The more important the action linked to a specific button is, the more attention we should put on the creation of this button, so to make it persuasive and functioning.


We should generally focus on two important aspects when we create a button:


How to set a link on a button

  • Double-click on the Button Object to open its settings window.
  • Click in the button to open the Link window. 
  • There, choose the action you want to perform, set the necessary parameters and click OK.


How to define the graphic style for a button

  • Use the Properties section to define the following elements:
    • the Text  which needs to be displayed in the button;
    • the text size and the font;
    • the text color and the button background color;
    • the button border and margins.
  • To make it cleat that the element is a button, set a Mouse Over Effect by choosing a different background color.
  • When you're happy with the result click on OK.


4 tips to create efficient buttons

Buttons are generally very important for a web page. To make them more efficient, you need to follow these rules:

  1. Carefully select the CTA (Call to Action) for your button label: it should be brief, direct and clear, so that the readers will immediately understand what will happen by clicking.
  2. Put some effort in the graphic style: choose some colors that get along well with the rest of the template, but make sure they create a contrast with the background. 
  3. Use animations and effects: micro-interactions will help the visitor recognize and use your buttons.
  4. Try different CTAs, colors and effects: don't forget the most effective solution isn't always the one you graphically like the most.



#tip - Alternatives. A part from the Button Object, you can also use some Optional Objects to create your buttons. Try the Animated Button, Download Button and Hover Button Optional Objects and find out the one which fits the best.