Create Unique HTML/CSS Social Buttons in 8 Easy Steps

28th Apr 2014 | Posted by Eko S. | 1 Comment

Social is a new SEO today, said Neil Patel. So engage your readers by give them to follow and share your post by social button is very important. And the unique button will help you to get more visitors attention.

So to help you, today we’ll share a step by step tutorial on how to create unique social button by using our free Clipp Follow Us button (PSD). Take a look our final result:

Social Media Buttons Tutorial

Step 1: Preparation

The first step that you should do is setting up the folder structure.

Social Media Buttons Tutorial

You can download the images (bg-logo-hover.png, bg-logo.png) here.

Step 2: The Basic HTML and CSS Structure

Let’s start the code by making a basic html page, then save the script in index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>Clipp Follow Us button Social</title> 
        <link rel='stylesheet' type='text/css' href='/articles_and_tutorials/unique_social_buttons_tutorial_html_css/styles.css'/>    
    </head>
    <body>
        <div class="container">
            <ul>
                <li class="youtube">
                    <div class="logo"></div><div class="body-list"><span><a href='#'>YouTube</a></span></div>
                </li>                
            </ul>
        </div>
    </body>
</html>

Here the result of our first index.html

Social Media Buttons Tutorial

Now, we’ll create the background page and the container. Let’s add the CSS script below in our style.css file

body{
    background: #95ddf9;
}

.container{
    height: auto;
    max-height: 300px;
    width: auto;
    max-width: 45%;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;    
    top:0;
    padding: 25px !important;
}

ul li{     
    list-style: none;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 6px;   
}

And here the result after we add the basic style.css

Social Media Buttons Tutorial

The next step is make it more presentable. And to make it easier we divide in 3 parts: logo icon, body, dan ring.

Social Media Buttons Tutorial

We’ll start by making a button first, then for the other buttons we’ll discuss more details in step 6.

Step 3: Style Body dan Ring

First we’ll create a style for the body part. Please adding this script below on our style.css file

li .body-list{
    position: relative;
    background: #f4f4f4;
    border: 1px solid #61abc9;
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    width: 112px;
    height: 25px;
    margin-left: 31px; /* made space for logo */
}

Social Media Buttons Tutorial

Then to make the text more presentable, we’ll add the css style below:

li .body-list span a{    
    color: #747474;
    text-decoration: none;
    text-transform:capitalize;
    padding: 5px 40px 5px 15px;
    position: absolute;
    font-size: 13px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Social Media Buttons Tutorial

We’ll add the ring on the left side of the button.

li .body-list span{
    content: " ";
    height: 100%;
    width: 5px;
    background: #cc7b7b;
    position: absolute;
    float: left;
    left: 0;
}

Social Media Buttons Tutorial

Step 4: The logo icon style

Next, we’ll add the social logo icon. In this step, we’ll use the images that you have downloaded before.
Let’s started:

li .logo{
    position: relative;
    background: #b80000  url(/articles_and_tutorials/unique_social_buttons_tutorial_html_css/images/bg_logo.png) no-repeat -4px -6px;    
    width: 30px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #61abc9;
    border-right: 1px solid transparent;
    float: left;
    height: 25px;
}

Social Media Buttons Tutorial

Step 5: Add the 3D Effect

To make our button looks interesting we’ll create 3d effect. The technique is by doubling the button then add box-shadow, then change the z-index and margin value to adjust its position.

Social Media Buttons Tutorial

We’ll start by doubling the button first, by make a change our index.html from this section:

...
<li class="youtube">
<div class="logo"></div><div class="body-list"><span><a href='#'>YouTube</a></span></div>
</li>
...

Change with this:

...
<li class="youtube">
<div class="logo"></div><div class="body-list"><span><a href='#'>YouTube</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>
...

Note the script above, we had duplicate the button and add the box class on the logo class and the body-list.

Social Media Buttons Tutorial

Next, we’ll add the box-shadow effect the same time adjust the position.

.box, .box span{
    /*add box-shadow*/
    -webkit-box-shadow: inset 0px -6px 10px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow:    inset 0px -6px 10px 0px rgba(50, 50, 50, 0.35);
    box-shadow:         inset 0px -6px 10px 0px rgba(50, 50, 50, 0.35);
}

Social Media Buttons Tutorial

To adjust the button position, still on the same class (.box, .box span{}) just below the box-shadow please add this css script:

/*setting position*/
    margin-top: -23px;
    z-index: -10;    
    border-bottom: 1px solid #61abc9 !important;

Then add more class just below this class: (.box, .box span{}):

.box span{
     margin-top: 0;
     border: none !important;
}

Social Media Buttons Tutorial

We still need to make it more presentable. Especially on the border section. Please add this css property

li .body-list {
    ...
    border-bottom: 1px solid rgba(225,225,225,0.5);
}

li .logo{
    ...
    border-bottom: 1px solid rgba(225,225,225,0.5);
}

Social Media Buttons Tutorial

Step 6: Let’s add the other social buttons

We just finished a social button, let’s make the others by duplicate the first button.

<ul>
<li class="youtube">
<div class="logo"></div><div class="body-list"><span><a href='#'>YouTube</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>
	
<li class="twitter">
<div class="logo"></div><div class="body-list"><span><a href='https://twitter.com/dynamicwp'>twitter</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="dribbble">
<div class="logo"></div><div class="body-list"><span><a href='#'>dribbble</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="rss">
<div class="logo"></div><div class="body-list"><span><a href='#'>RSS</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="facebook">
<div class="logo"></div><div class="body-list"><span><a href='#'>Facebook</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="pinterest">
<div class="logo"></div><div class="body-list"><span><a href='#'>Pinterest</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="linkedin">
<div class="logo"></div><div class="body-list"><span><a href='#'>LinkedIn</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="deviantart">
<div class="logo"></div><div class="body-list"><span><a href='#'>DeviantArt</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="behance">
<div class="logo"></div><div class="body-list"><span><a href='#'>Behance</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="forrst">
<div class="logo"></div><div class="body-list"><span><a href='#'>Forrst</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="vimeo">
<div class="logo"></div><div class="body-list"><span><a href='#'>Vimeo</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>

<li class="flickr">
<div class="logo"></div><div class="body-list"><span><a href='#'>Flickr</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href='#'></a></span></div>
</li>
</ul>

We just duplicate the button code, that you need to consider is we just change the class name of <li> tag for each buttons, e.g. for the YouTube button we’ll ad class <li class=”youtube”> whereas for Twitter button: <li class=”twitter”> and so on for the other buttons.

Social Media Buttons Tutorial

Whereas for the icon logo and the ring we still use the same style. Since we’ll discuss it further in step 7.

Step 7: Change the logo icon, ring and do image sprites

In this step, we’ll add different style for each button. And we’ll use css image sprites technique for the icon.

Image Sprites is a technique to put many images in a single file, what we need is the coordinat of the images. And to get the coordinat we’ll change the css atribut of “background-position”.
Here, take a look the change for the Twitter button as the example.

/* change icon and background logo*/
.twitter .logo{
background-color: #2aaddd; /* change background logo*/
background-position: -48px -8px; /* change icon logo*/
} 

/* change ring color*/
.twitter .body-list span{
background: #8dd8f4;
}

And here the complete script style for each buttons.

.twitter .logo{background-color: #2aaddd; background-position: -48px -8px;}
.twitter .body-list span{background: #8dd8f4;}

.dribbble .logo{background-color: #f6287f; background-position: -92px -8px;}
.dribbble .body-list span{background: #f49cc2;}

.rss .logo{background-color: #ed6428; background-position: -4px -54px;}
.rss .body-list span{background: #feb095;} 

.facebook .logo{background-color: #4462a3; background-position: -48px -54px;}
.facebook .body-list span{background: #a1b6e2;}

.pinterest .logo{background-color: #eb354b; background-position: -91px -54px;}
.pinterest .body-list span{background: #ff909d;}

.linkedin .logo{background-color: #006dc0; background-position: -4px -97px;}
.linkedin .body-list span{background: #71baf1;}

.deviantart .logo{background-color: #597062; background-position: -48px -97px;}
.deviantart .body-list span{background: #a4b3aa;}

.behance .logo{background-color: #00c6ff; background-position: -92px -97px;}
.behance .body-list span{background: #74e0ff;}

.forrst .logo{background-color: #4ec026; background-position: -4px -138px;}
.forrst .body-list span{background: #9dd888;}

.vimeo .logo{background-color: #2c81ba; background-position: -48px -137px;}
.vimeo .body-list span{background: #87bfe5;}

.flickr .logo{background-color: #58595a; background-position: -92px -137px;}
.flickr .body-list span{background: #9e9e9e;}

Social Media Buttons Tutorial

Step 8: Adding the hover effect

As the final step, we’ll the hover effect for the button. We’ll change the background body, ring and the icon to become grey and transparent. Also we’ll make the logo icon darker and change the cursor too. Here:

/*hover*/
li:hover .body-list{background-color: #dddddd; cursor: pointer; }
li:hover .logo{background-color: #888; background-image: url(/articles_and_tutorials/unique_social_buttons_tutorial_html_css/images/bg_logo_hover.png); cursor: pointer;}
li:hover .body-list span{background-color: #b1b1b1}

Social Media Buttons Tutorial

Thats It!

You should now have an unique social button created entirely with CSS and HTML. You also have the strong basic workflow to create the unique social button that you can applicate on your website. This tutorial is based our free “Clipp” follow us button (PSD). And I hope you found this tutorial is useful. Leave a comment below and let us know what you think. Enjoy!

- Written by Mukhlasin -