Create Interactive CTA buttons for Your Website

With our new actions and animations features, you can now add so much interactivity to your websites. One of the actions that we want to highlight is “Set Style” and “Reset Style.” These actions cause the style or design of an element to change when a reader hovers over it, clicks it, or hovers away from it. This is similar to onMouseOver and onMouseOut in JavaScript.

 

Unlike other website builders, we designed actions and animations in a way that gives you total freedom to customize the interactivity you want. The possibilities are nearly endless. Since there are so many ways to use these actions and animations, we thought we’d share some of our favorite ways to use them.

 

We like using the “Set Style” and “Reset style” actions for the Call-to-Action buttons on our website. As you’ll see in the gif below, the CTA button on our site has a white background with a teal border and the text is black. If you hover over the button, the background turns to teal and the text turns white. If you hover away from the button, the button changes to its original style. Simple interactivity!

 

set-reset-style-production-same-frame-rate.gif

 

To achieve this look, we first created the original button with the white background and black font. We then copied and pasted the button, then changed the copy’s font color to white and it’s background to teal. This is the design, or “style,” we want the button to have once a user hovers over the button.

 

We then saved this style as a style template. The important thing is to name both the font styles and the element styles with the same name. We chose to name them both “button-hover-over.” Next, we deleted the copied button (teal background).

We then selected the original button element, and opened the actions menu. In the Hover Over section, we selected the action “Set Style.” Under the style drop down, we selected the name of our style we saved called “button-hover-over.”

To make the button return to its original style when a user mouses away from the button, we selected Reset Style under the “hover away” section. To make our button a link, we also added “Go to External Link” in the On Click section. That’s it!

 

For more details on how to add interactivity to your CTA buttons, check out our how-to video! Stay tuned for part 2, where we’ll show you how you can use “Set Style” and “Reset Style” to make interactive headers and footers.

 

Subscribe
Our blog highlights delivered bi-monthly to your inbox
Subscribe to email updates
Our blog highlights delivered bi-monthly to your inbox

Builder. Marketer. Technologist. CEO @Readz | The one-stop solution for brands to create interactive brand content for the web | organic foodie beerie | paleo | cyclist | Los Angeles