Adding Life to Your Social Media Icons
One of the things I get comments about is my social media bar, whether it’s for my portfolio or for the startup I work for. Using SCSS mixins, filters, and transforms, we can make your icons come alive.
Every developer has a social media bar. The basics are usually just a few social media icons which are connected to each personal website and not much else happens. Who wants to engage with something that looks boring?
To those who know me, I love working with styling and animations. This is my current social media bar in my portfolio:
It’s not much, but it certainly breathes some life and interactivity to icons which we see far too often. If this is something you’d like to do, I can show you how.
First off, you have to pick out where you want to get your icons from. I personally enjoy Ionicons minimalistic style. If you want to follow along with these icons, make sure you read Ionicon’s documentation for usage. It’s as simple as adding two lines to your script section in HTML. The setup stage should look something like this:
With no styling, your buttons will be blue and purple, depending on if they’ve been visited yet. I’ve also labeled each of the icons using BEM Methodology. If you’re unfamiliar with that, check out my other blog post on it! I also have to mention that I use SCSS. If you’re following along in codepen.io, make sure under the CSS tab, you set your preprocessor to SCSS. Lastly, I have target set to blank because I want the links to open up in a new tab. Now that the HTML and settings configuration is done, we can get to the fun part.
The interesting thing about ion icons is that they change size based on font size. I’m going to grab the header__icons class, and set everything within it to have a font size of 40px. My icons will now look like this:
Now I want all of them to lose the color, but instead of setting the attributes for :active, :visited, :hover, and :link individually, I’m just going to apply a grayscale filter to all of them. This part gets a bit interesting, I’m going to create a mixin called iconColorChange, which is made to set the icons to grayscale, but upon hover, changes them back to having no filter. I want this transition to occur over the course of .3 seconds as well.
Remember to move your mixin to the top of your file. If you try to include the mixin before you have created it, it won’t work! Notice that I include the color change mixin for all the children of header__icons using the * selector.
Now that we’ve got the transition working, we want to set the colors for each of them. Remember that we specified each icon’s class name at the end of header__icons. All we need to do is to target each icon and set its color to the color of choice. I used LockDownSEO to find all the social media icon colors compiled in one site. If you’ve successfully added color to each icon, you should get something that looks like this:
Lastly, let’s make them scale up a little bit when we hover. I’m going to create another mixin since we have to apply this to all the icons as well. I’ll make a transform property and set scale to 1.4 times. I’ll also make the transition from regular size to large size happen over the course of .4 seconds. Although it would make sense to include it under the all children selector, it strangely does not work, so I added them individually to each icon. The final result should look like this:
And that’s it! That wasn’t too bad right? There are so many other ways you can change up the style too. I’ve used box-shadows to make it seem like the icons pop out on hover, or using translate to have the icons move in a direction instead. I hope this blog was helpful and added some interactivity and life with your social media bar.
Have fun with CSS and don’t be afraid to explore!
