Compatibility:

WebSite X5 Evo and Pro

The Hover Button Object is perfect for creating animated buttons for your website pages. You can check out some examples on this Preview page: the available options and effects, together with a bit of imagination, will help you create incredible results. We used this Object in many of our Templates, for instance in Fashion Bytes or CV Power. 



Do you want to find out how Hover Button works? Check out this video or keep reading:



How to set up a link for the button

  • Double-click the Hover Button Object you added on the page to open the settings window.
  • Click on the button to set up a Link.
  • In the following window, choose the action you want to perform, set the necessary parameters and click OK when you're happy with the result.


How to define the button style

  • In the Hover Button window, use the options available in the Properties, Border and Icon sections to define the button style at its normal original state. As you can see, you can for example:
    • report and format the text for the button;
    • set the button size, colors and borders;
    • set and position a background image.
  • Use the options in the Mouse Over Style section to define the button style in its hover state. Try to:
    • set a Text variation, so the inserted text is shown for instance in italics;
    •  import a different background image or position the same one differently;
    • choose an animation effect.
  • Click 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 your buttons even with the Button Object you can find in the Page main Objects list. Check out the Animated Button and the Download Button Optional Objects too and choose the one that better suits your needs.


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


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