Animated Social Media Menu with CSS

In this tutorial, we will create an elegant and colorful social media menu with pure CSS without using any image. And since we are not using any image or a social media icon set, it is retina display ready.

Social sites have become one of the most important and useful medium to get subscribers and promote your content online. Almost all leading websites these days integrate social icons on the web pages. There are many cool social media icon sets which you can display on your website. But in this menu, we will be using the icon fonts from IcoMoon. No need to wait, first have a look at what we will be creating at the end of this article.

social-menu

Social Media Menu Demo

All the files and icon-fonts used in this demo are available for download at the end of this tutorial. If you just wish to implement it on your website; go grab the codes.

Icon Font from IcoMoon

Our first task here is to get the desired icon fonts from IcoMoon. Well, you get quite a number of useful free font icons at IcoMoon. Just select the social media icons you would like to use and click on generate font button at the bottom. You will get the preview of all the selected icons; click on download to get the files in a zip folder. In this zip folder, you get fonts in all the necessary formats, a demo html file and a CSS file. For the icon fonts to work properly, we need to copy and paste the codes from ‘style.css’ to our CSS file. We will also need to copy the fonts folder in our website directory.

IcoMoon Icons

With this, our social media icon set is ready; the next task is to create some cool effect using CSS.

HTML for Social Menu

The HTML code for the social media menu is fairly simple. We are keeping the icon-fonts along with some text inside the parent “demo” class. All the font-icons are nested as list items (li) inside an unordered list (ul) to keep our mark-up clean and readable.

<div>
    <ul>
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-facebook">
       </i></span><span>Like</span> </a></li>
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-google-plus">
       </i></span><span>Add</span></a> </li>
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-twitter">
       </i></span><span>Follow</span></a> </li>
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-pinterest">
       </i></span><span>Pin it</span></a> </li>
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-feed">
       </i></span><span>Subscribe</span></a> </li>
       <li><a href="#" title=""><span><i aria-hidden="true" class="icon-stumbleupon">
       </i></span><span>Stumble</span></a> </li>
    </ul>
</div>

Inside each list item, we have placed two spans inside the hyperlinks which will be used to put the URL of the social media sites. We have assigned the class of first span as “icon” which contains the icon-font.  For using icon font, we need to place it inside an “i” element with class name formatted as “icon-icon-name” and setting the attribute aria-hidden to true. In second span, we have simply put the text which we want to appear when we rollover our mouse to icon. That’s all for the HTML part – and you can have as many icons as you wish!

CSS code for Social Media Menu

First let’s have a look at the simple codes.

.demo
{
    width: 480px;
    margin: 80px auto;
}
.demo ul
{
    padding: 0;
    list-style: none;
    font-size: 16px;
}
.demo li
{
    float: left;
    width: 80px;
    text-align: center;
}
.demo li span
{
    display: block;
}

Nothing great here – we are defining the width of the parent div “demo” as 480px as each of the social media menu will be 80px wide. The “list-style” property of “ul” is set to “none” as we don’t want any numbering or disc to appear before list items. Each of the icon-font and text associated with it is defined as a block element (to retain its defined width and height).

.demo a
{
    display: block;
    color: #ffffff;
    text-decoration: none;
    transition: .3s;
}
.demo ul:hover a
{
    color: rgba(255, 255, 255, 0.6);
}
.demo ul:hover a:hover
{
    color: #ffffff;
}

The above code simply introduces a cool effect on all the icon-sets. Once you mouse hover on any part of “ul”, all the icons (which is just like another text here) and the associated text lowers its opacity to 0.6 making it a little dull (see codes for .demo ul:hover a).  However, the hovered item color is changed to pure white making it distinct from others. We are also introducing a slight transition delay of 0.3 seconds. I have eliminated the prefix from the CSS elements, but make sure you add it for better compatibility with browsers (these are there in the files available for download).

The next step is to define the background color and box-shadow colors for each list items. You need to find out the exact colors for each of the media icons for which you can use online color dropper tools. The box-shadow is the same color as that of background with slightly lowered opacity. We are using the nth-child selector to define the properties of each list item.

.demo li:nth-child(1) i
{
    background: rgb(59, 89, 152);
    box-shadow: 0 0 0 0 rgba(59, 89, 152,0.6);
}
.demo li:nth-child(2) i
{
    background: rgb(210, 64, 46);
    box-shadow: 0 0 0 0 rgba(210, 64, 46,0.6);
}
.demo li:nth-child(3) i
{
    background: rgb(0, 172, 238);
    box-shadow: 0 0 0 0 rgba(0, 172, 238, 0.6);
}
.demo li:nth-child(4) i
{
    background: rgb(203, 34, 41);
    box-shadow: 0 0 0 0 rgba(203, 34, 41, 0.6);
}
.demo li:nth-child(5) i
{
    background: rgb(240, 150, 0);
    box-shadow: 0 0 0 0 rgba(240, 150, 0, 0.6);
}
.demo li:nth-child(6) i
{
    background: rgb(234, 75, 36);
    box-shadow: 0 0 0 0 rgba(234, 75, 36, 0.6);
}

Now it’s the time to style the social icons and set a cool flashing effect.

.demo i
{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 12px;
    border-radius: 50%;
    font-size: 30px;
    transition: box-shadow .4s ease-in-out;
}
.demo a:hover i, .demo a:active i
{
    box-shadow: 0 0 0 25px transparent;
}

You can set the size of the icon by defining the font-size. By defining the border radius equal to 50%, we are actually making the rounded shape behind the icons. To create the visual effect, we are setting the transition time of box-shadow property to 0.4 seconds. On link hovered and active states, the box-shadow spread expands and it becomes transparent at the end.

The last task is to create the effect of text appearing after a slight delay.

.demo .icon + span
{
    margin-top: 20px;
    opacity: 0;
    -webkit-transition: all 500ms cubic-bezier(1.000, 0.000, 1.000, 0.650);
}
.demo a:hover span, .demo a:active span
{
    opacity: 1;
}

The text related to each icon is placed 20px below it and is fully transparent (opacity zero) in the beginning. For text, we are using the Cubic-Bezier transition for introducing slight delay in the beginning. This makes text appear only after the icon animation is towards end.

The text appears and disappears with the animation once you roll over your mouse to and out of any icon.

That’s all my friends. Here we have just built a nice looking animated social menu with pure CSS which is also retina display ready. For older browsers which do not support the CSS3 properties, the icons will degrade nicely (but please don’t expect it to run it on IE 6). You are free to grab the codes and use it on your website. You are also free to share this content on your blog or website but make sure your put the link directly to this page and not to the downloadable files. Special thanks to tympanus.net from which I have taken the inspiration to build this CSS social menu.

Download the source codes and icon font files from below link.

Download

Tagged on: ,

9 thoughts on “Animated Social Media Menu with CSS

  1. Hamid Sarfraz

    Hi,
    Nice post.
    i would like to point your attention to a little bug. The HTML file in downloadable archive file of this post has a like that points back to this post. the link is incorrect and contains wwww.yoursite.com (4 times w).

    Otherwise the idea is amazing and this is the first time I have read of it anywhere.

    Thanks for the information.

  2. Pingback: Social Media Retina Ready Menu With Pure CSS | MenuCSS.Net

  3. Ken

    Hi, love the coding and I am trying to make it work for my website. It looks great on the web but on mobile and tablet devices the icons get replaced by emoticons and I can’t see a difference between the code shown and what I have. Help?…please.

  4. Max B

    Great tutorial thanks!

    Just realised that: border-radius: 50%; in .demo i changes the circle to a square if you change it to 0, and the animation fits in with the shape perfectly!
    Great!

Leave a Reply