How to Create Hover Effects

Hover Effects  

Hover happens when the visitor hovers their mouse over a specific element and can shows that a button is interactive.

• Watch Hover Effects Video Tutorial.

Create a Hover Effect

1. Select the layer(s) you want to add the effect to

2. In Prototype, expand the Smart Layers section, and click Hover Effect

3. Select the desired Hover effect, or enter your own CSS transition

4. Click Save

Preview Live Website: [Open]
Sketch Sample File: [Download]

Hover Effect Examples

• Preview Live Website: [Open]

• Sample Sketch File: [Download]

Fade In Hover Effect Tutorial

Learn More

• Creating a High-Fidelity Prototyping in Sketch

• How to Publish a Website and Host it With Anima

• How to Handoff Design Specs to Developers

• How to Export Sketch to HTML

• Team Collaboration

We’re super excited to have you trying it out and hearing your feedback.