With our actions and animations features, you can 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 use the “Set Style” and “Reset style” actions for the Call-to-Action buttons on our example. As you’ll see in the gif below, the CTA button on our example 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!
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!
image01image03image02image00
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.
readz logo- mobile
twitter logo
facebook logo
linkedin logo
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- cosmetics readz client- hospitality readz client- telecommunications readz client- outdoor advertising readz client- ecommerce
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
USING READZ
BEST OF
LATEST
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
Back to Top