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!
How To Add Call-To-Action Buttons
We use the “Set Style” and “Reset style” actions for the Call-to-Action buttons.
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
DELIVER BETTER EXPERIENCES
DELIVER BETTER CONTENT EXPERIENCES