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.

--

--

--

Full stack developer and stand-up comic.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Dealing with Asynchrony when Writing End-To-End Tests with Puppeteer + Jest

Angular — fresh overview of internationalisation

CabloyJS: The Ultimate NodeJS Full Stack Business Development Framework

🚀Good News 🚀 Today we trial TravGoPV app platform development for Android🥳🥳 Hope from this…

Start your first FastAPI server with Poetry in less than 10 minutes

Working Prototype

Auhof Center Kundenservice

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hall

Sam Hall

Full stack developer and stand-up comic.

More from Medium

Diving into CSS Animations

Simple ways to make your page responsive: A Breakdown

Stop using pixel values in your CSS media queries

All About CSS Media Query.