Animating transitions on hover
One of the most common types of transitions you might have seen on websites is simple animations when you hover over buttons. In order to signify that the user is hovering over a clickable button, we can make the button change color, grow, cast a shadow, and a whole host of other effects.
To achieve this, we need to specify three things:
- What does the element in question look like in its initial state?
- What does it look like in its final state?
- Are there any transition effects we want in order to take the element from its initial state to its final state?
Typically, this would have required us to write custom CSS, but Webflow allows us to do this visually without code.
In our case, we're going to add simple transition effects onto the download buttons that are on the Hero section of the SecondPlate landing page. We'll shift from a non-active state to a hover state, and in doing so, we'll move the button slightly...