Interactive Animated Social Links in React

A quick and easy guide to making social links that pop!

Use social media icons and simple CSS to make stylish links in React!

Step 1 — Find an image and upload to your React App file

Find an icon image file (preferably high definition, transparent background etc), and select the image size that best suits the needs of your design. Then download the image file and place it in the “src” file of your React app file. For my icon images, I used IconFinder.

Add the image file to your “src” file. Name it wisely!

Step 2 — Import the image into App.js and create an <img> HTML tag

Import the image file into the App.js file and give it an alias following the syntax below:

Import the file from “src” into App.js.

Then create an image tag in the HTML body of App.js. The “src” attribute of the <img> tag will be the alias that you gave the file when you imported it. It should look something like this:

The src attribute of the <img> tag is now the image file you previously uploaded.

Step3 — Wrap the <img> tag in an <a> tag

If we wrap the <img> tag in an <a> tag, we can then provide the “href” attribute a website to link our users to.

<img> tag wrapped in an <a> tag, with the href attribute directing the user to Instagram.

Step 4 — Give the image a className attribute

Our static image link.

Right now, our social media icon is just a static image on a page that acts as a link. Pretty boring stuff! By attributing a className to the <img> tag, we can manipulate the element’s styling in CSS and make it animated and interactive!

The <img> tag now has a className attribute of “social-img-link”

Step 5 — Manipulate styling in CSS!

Now that we have a className attribute set for the <img> tag, in the CSS file we can call “social-img-link” and add styling.

To add the hover animation as seen in the demo above, you can add a transition styling element to .social-image-link that activates on the hover, and adds “drop-shadow” to the image. In order to do this, in your CSS file you have to call the className once more and add “:hover” at the end. Then add the specific style selectors that you want to see when the image is hovered over.

The hover selector in action.

The “hover” selector can be used to create conditional styling that only becomes active when an element is hovered over by the user’s cursor.

Voila! A simple animation on our image link!

Further Reading

I used React Codesandbox for examples.

CSS Box Shadow

CSS :hover Selector

Hover.css - A collection of CSS3 powered hover effects