How to create image links and style them with hover effects

Here’s a very straight forward simple tutorial on how to create image links with Sketch and Sketch2React.

Step 1

Step 1 — Convert your image into a symbol

Convert your {image} to a symbol. If you want to have several different hover effects for different images call it something like Images/ImageOrangeHover and then for the next one Images/ImageGreenHover.

Step 2

Step 2 — Group the image and rename it correctly

Double-click the newly created symbol on your artboard. You are now inside the symbol on your Symbol page.

Select the image and group it. Name the group exactly like this: {button-primary} [p20] The [p20] stands for Padding 20px, you can adjust this to your liking. If you for example change this to [m20] your adding a margin of 20px all around the image.

You guessed it — Step 3 image

Step 3 — Copy all interactive elements

Use our Primary Button template symbol that you’ll find in the demo document attached to this tutorial. Copy all the necessary files from the other image links with hover effects.

Style it baby!

Step 4 — Styling is fun!

Now comes the fun part — styling! 🤩🧞‍Apart from clean color fills we also support gradients. Change the border radius for a smoother look.

Awesome work!

Video tutorial