How to Create Custom Social Media Icons in CSS3

Topic: HTML / CSS3
Difficulty: Beginner
Estimated Completion Time: 35 mins

On almost every website, blog, magazine or business you come across on the internet; it has some kind social media content or buttons. Whether it be social sharing, profile links, or “liking”, “following”, etc. This tutorial will show you how to create custom social media icons step by step. So, lets begin!

STEP 1 – Creating the Buttons

To begin creating our social media buttons we will start with creating the actual button. Let’s start by adding the simple HTML code below for the button.

<html>
<head>
</head>
	<a class="share__btn" href="#">Tweet</a>
</div>
	<a class="share__btn" href="#">Like</a>
</div>
	<a class="share__btn" href="#">+1</a>
</div>
</html>

Now that we have added the basic HTML we can now add some style to it and start shaping out the buttons. The CSS below will be used as the border and style for the both the buttons and the share counter.

body {
	font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding: 42px 40px;
}

a {
	text-decoration: none;
}

.share {
	display: inline-block;
	margin-right: 20px;
}
.share__count {
	background-color: #fff;
	border: solid 1px #a5b1bd;
	border-radius: 3px;
	/* add in vendor rules */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	/* add in vendor rules */
	color: #424a4d;
	float: left;
	font-weight: bold;
	margin-right: 10px;
	padding: 4px 10px;
	position: relative;
	text-align: center;
}

Social Media Icons

Now, we’re not quite finished creating the basic layout for both the share buttons and the share counter by adding the above code. We now need to add this basic CSS code to finalize and shape out the buttons.

.share_size_large > .share__count {
	display: block;
	float: none;
	font-size: 18px;
	margin-right: 0;
	margin-bottom: 12px;
	padding: 10px 0;
}

.share__btn {
	border: solid 1px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	/* add in vendor rules */
	box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
	/* add in vendor rules */
	color: #fff;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 10px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

STEP 2 – Stylizing The Share Buttons

Since we have finished creating the basic button layouts we can now begin stylizing them by inserting the HTML code to point to the CSS element.

Let’s add the HTML code below to each of our share buttons. Now, remember; we will be adding style to the buttons through the CSS code we will be adding later. If you want a Facebook share button style; then add “type_facebook”. If you would like a Twitter style share button, add “type_twitter”, and so on. You can always customize the colors and styles of the different buttons based on your social media profiles.

.share_size_large > .share__btn {
	padding: 5px 0;
	width: 100%;
}

.share_type_twitter > .share__btn {
	background-color: #4099FF;
}

.share_type_facebook > .share__btn {
	background-color: #3B5999;
}

.share_type_gplus > .share__btn {
	background-color: #F90101;
}

Social Media Icons

STEP 3 – Creating The Share Counter

We now want to add the share counter to the social media buttons. Let’s start by adding the small and simple HTML code to each and one of our buttons in which we would like to display the social media counters. You can always implement social sharing counters into your buttons; Which I have showed you how to do in “Step 5″.

Now, we will want to add some style to the social counters. Basically, this will add some layout to the counter box.

 .share__count:before, .share__count:after {
  content: '';
  display: block;
	height: 0;
	top: 50%;
  position: absolute;
	right: -14px;
  width: 0;
	margin-top: -6px;
}

.share_size_large > .share__count:before, .share_size_large > .share__count:after {
  content: '';
  display: block;
	height: 0;
	left: 50%;
  position: absolute;
	top: auto;
  width: 0;
}

STEP 4 – Finishing the Social Media Buttons Style

We’ll now finish the social media buttons style off by finalizing the social counters by adding style to them and adding a small pointer toward the actual buttons. The following code also fixes any border and layout problems your buttons may have.

.share__count:before {
	border: solid 7px transparent;
	border-color: transparent transparent transparent #a5b1bd;
}

.share_size_large > .share__count:before {
  border-color: #a5b1bd transparent transparent transparent;
	bottom: -14px;
  margin-left: -7px;
}

.share__count:after {
	border: solid 6px transparent;
	border-color: transparent transparent transparent #fff;
	right: -12px;
	margin-top: -5px;
}

.share_size_large > .share__count:after {
  margin-left: -6px;
  bottom: -12px;
  border-color: #fff transparent transparent transparent;
}

Social Media Icons

STEP 5 – Adding The Working Counter

Since we have finished up the button and counter design it’s time to make the counter actually usable. For this, we will be using PHP. Now, if you want the counter to work properly, go grab the Facebook/Twitter/Google Plus API counter for shares, likes, comments, etc, from the social network website and replace the URL after file_get_contents with your API URL.

The PHP code is below, just be sure to name your file social.php if you don’t change the code I provided.

'; $fbend = '';
		$fbpage = $facebook;
		$fbparts = explode($fbbegin,$fbpage);
		$fbpage = $fbparts[1];
		$fbparts = explode($fbend,$fbpage);
		$fbcount = $fbparts[0];
		if($fbcount == '') { $fbcount = '0'; }
}
function twit_count() {
		global $tcount;
		$twit = file_get_contents('http://api.twitter.com/YOURPOST/PAGE');
		$begin = ''; $end = '';
		$page = $twit;
		$parts = explode($begin,$page);
		$page = $parts[1];
		$parts = explode($end,$page);
		$tcount = $parts[0];
		if($tcount == '') { $tcount = '0'; }
}
?>

Since we have now created the social.php file, we can now link the social media buttons to the actual counter. Place the small PHP code where your fake counter numbers are located near your button. Be sure to replace fbcount with the correct social name in the PHP file.

Creating the counter with Google+ is a bit different, and a bit difference for the most part. Just add the following code to where you want to display the counter numbers. With, the Google+ counter you may want to make the layout for the counter a bit wider; which will just make it look a bit better, since the Google+ counter is different than the Twitter and Facebook API.

Social Media Icons

Conclusion

Now that we have finished creating the social media buttons you can now implement them into your CMS or website. Be sure to obtain your post/page Facebook API counter before you try to use the counter. I hope this Designmodo resource comes of great use to you.

Download Files

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Dylan is a web designer, developer and writer. He is the editor-in-chief at ThemeCrush.

Newsletter

11 Comments
  1. maxslayer44 Feb 16, 11:54 am

    The beginning of the PHP code is missing.
    However, this tutorial’s still great !
    (Sorry for my bad English, I’m a French student)

    Reply
    +39
  2. DonBrefo Designs Feb 16, 1:21 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -6
  3. Harish Feb 16, 4:01 pm

    Really nice work Dylan. Hoping to use this.

    Reply
    +1
  4. Carlo Ventrella Feb 19, 6:02 pm

    Great article!! I just wait for the first part of php

    Reply
    +5
  5. pepperstreet Feb 22, 3:19 am

    Exactly what I needed! The default appearances are ugly and too different.

    Reply
    -3
  6. Vitor Azevedo Feb 23, 6:38 am

    Can you pls update/complete the php code?

    Reply
    +2
  7. Nyco Feb 23, 7:34 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -7
  8. federico Feb 26, 12:50 pm

    Probably the article is great, but missing the php code is totally useless. i also subscribed to your newsletter… feel rubbed.

    Reply
    +8
  9. Mohanraaj Mar 25, 6:39 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -5
  10. Shock Mar 28, 5:42 am

    I don’t think you can modify facebook like button this way…
    facebook like button is in iframe….

    Can you show us how to overcome this?

    Reply
    0
  11. Alief Sep 15, 5:53 am

    How to use this on wordpress ?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters