Possibly one of the best features of Cubender’s new HTML5 website builder is the ability to transform and animate any element on your page. In a few short steps, I’ll show you how easy it is to get started with some basic animation techniques.

Please note that this article was written for Cubender V4

For the purpose of this tutorial, we’re going to animate a Button with a “Scale” and “Rotate” effect. You can view the final resultĀ here.

  1. To achieve this effect, the first step is to add a Button to your webpage. A Button is navigational item and can be used to link to webpages, download files and more. To add a Button to your page, click the Button widget from the Widget Gallery.Cubender's Button Widget
  2. Now open the Style Menuby clicking the Style menu icon.
  3. Since we’re interested in doing a hover (or rollover) animation, click the “rollover” toggle.
  4. Scroll down to the heading “Transform” and click it to open its settings.
  5. Drag the slider for “scale” until it reads “1.5”. Now hover your mouse over the Button and you’ll notice that it zooms up to 1.5 times its size.
  6. Drag the slider for “rotation” until it reads “32”. Now hover your mouse over the Button and you’ll notice that it zooms and rotates 32 degrees.
Now that we’ve added our desired hover effect, it’s time to make it animate.
  1. While the Style Menu is still open, click the wrench icon to show the Advanced Options tabs.
  2. Finally, to enable a smooth animation simply check the option “Transition Animation”.
When you hover your Button, you will now see a smooth hover animation. This example used a Button but the same technique can be applied for almost every Widget in Cubender’s Widget Gallery.
Until next time!