Compatibility:

WebSite X5 Evo and Pro

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. You can use the Animated Button Object and get similar results to those you can find on this Preview page. We have used this Object for instance in many of our Templates, such as BonBon Ceremonies.



How to set a link on the 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

  • Still in the Animated Button window, use the options available in the Style section to define:
    • the Text  which needs to be displayed in the button;
    • the text size and the font;
    • the text color and the button background color;
    • optionally, the image you want to use as button background;
    • the button size, reported in pixels.
  • To make it cleat that the element is a button, set a mouseover effect. Use the Effect options to:
    • choose the Effect Type you want to apply, i.e. the button element which needs to change on mouseover: the shape, the background, the border or the shadow;
    • choose one of the available Effect style.
  • Click on OK when you're happy with the result.


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. You can create a button also with the l'Button Object you can find in the Main Objects List. Try the Download Button and Hover Button Optional Objects as well and find out the one which fits the best on your project.


Are you curious to use this Object on your website pages? Install Animated Button now


You don't have enough Credits to buy this Object? Check out our Credit Packs.