Social Buttons Using Bootstrap And Font Awsome

You see various social buttons all over the web. Literally billions of them. It seems to me that the latest trend is to make them fit the design of the webpage. This is how you get

I will be the first to admit that the "yellow" color really matches with the site. What I don't like is that the buttons really should have some resemblance to the "official" buttons for each social site. A little bit of testing has shown me that a Twitter light blue button is more recognizable as a Twitter button than a yellow Twitter button. The email registration button on the right is, in my opinion, mostly unrecognizable. (I have actually done some A/B testing on this and I am getting better traction with clear, colored buttons!)

Just to prove that I am not picking on my favorite Wyoming newspaper, this is from the Washington Post (I like them too!)

My goal with social buttons is to maximize the number of people that click on them. This means that I want them to be responsive and clear. They still need to fit into the design of the site. That means that with a light colored background you will need a different for the buttons. Then a dark background needs a different look. What I don't want is to hide them by making them match everything else on the site.

This is what I term the, "Social Afterthought". These social buttons are on a site but at the very bottom. They are clear but… will anybody ever find them? What about the poor Twitter bird! It is supposed to be white or blue!

The exact quote from Twitter is, "Our logo is always either blue or white. The Twitter bird is never shown in black or other colors." Hm….

Social Buttons that Look Good

Bootstrap 3.0.x and Font-Awesome 4.0.x provide part of the solution for some amazing social buttons. I will build them as buttons in HTML with some :hover behavior. I will try to closely match the color schemes that the original designer intended. A light and a dark variation.

First lets pull together a "hello, world" type of HTML file that checks that we have all the .css and .js files in the correct locaiton. I have:

./3.0.1/css
./3.0.1/css/bootstrap.css
./3.0.1/css/bootstrap.min.css
./3.0.1/css/bootstrap-theme.css
./3.0.1/css/bootstrap-theme.min.css
./3.0.1/fonts
./3.0.1/fonts/glyphicons-halflings-regular.eot
./3.0.1/fonts/glyphicons-halflings-regular.svg
./3.0.1/fonts/glyphicons-halflings-regular.ttf
./3.0.1/fonts/glyphicons-halflings-regular.woff
./3.0.1/js
./3.0.1/js/bootstrap.js
./3.0.1/js/bootstrap.min.js
./button01.html
./button02.html
./button03.html
./button04.html
./button05.html
./button06.html
./button07.html
./css
./css/bootstrap.css
./css/font-awesome.css
./css/font-awesome.min.css
./css/FontAwesome.otf
./css/fontawesome-webfont.eot
./css/fontawesome-webfont.svg
./css/fontawesome-webfont.ttf
./css/fontawesome-webfont.woff
./js/bootstrap.min.js
./js/jquery-latest.js

button01.html to button07.html are the demo files that follow.

Our first file is button01.html. This is just to make certain that you have bootstrap, font-awesome and other things in the correct places. I generally use Google Chrome. I will open the developer tools and click on "console". Then load the page for the first time. I am looking for 404 errors. Usually I have a few 404's on my first load of a new .html file.

Example 01 (button01.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons - Example 1</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
</head>
<body>

	<br />
	Just to get started and verify that stuff is loading.
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter"></i></button>	
        </div>
	</div>

    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


button01.html displays the Twitter icon in the wrong color. However you should see the little bird. If you don't - then it is time to go looking for what didn't load.

Example 02 will get us a little closer. The bird is white and the background is blue.

Example 02 (button02.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons - Example 2</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
<style>
.twitter-button {
	color: white;
	background-color: blue;
}
</style>
</head>
<body>

	<br />
	This is the twitter bird, but not in the correct colors.  
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter fa-lg"></i></button>	
        </div>
	</div>

    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


This example has the bird in the correct color. If you download the file and hover over the bird it will switch color to a forbidden color.

Example 03 (button03.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons - Example 3</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
<style>
.twitter-button {
	color: white;
	background-color: #00b0ed;
	background: #00b0ed;
}
.twitter-button:hover {
	color: black;
}
</style>
</head>
<body>

	<br />
	This is the twitter bird in the correct colors from twitter.  However hover over it and it turns "black"! that is
	forbidden!
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter fa-lg"></i></button>	
        </div>
	</div>

    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


Finally a Twitter bird in the correct colors with some hover effects that are tolerable.

Example 04 (button04.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Social Buttons - Example 4</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
<style>
.twitter-button {
	color: white;
	background-image: #00b0ed;
	background-image: -moz-linear-gradient(top, #00b0ed 0%, #1b8cba 50%, #1588b4 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b0ed), color-stop(50%,#1b8cba), to(#1588b4));
	background-image: -webkit-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -o-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -ms-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	background-image: linear-gradient(to bottom, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0ed', endColorstr='#1b8cba',GradientType=0 );
}
.twitter-button:hover {
	color: #00b0ed;
	background-image: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); 
}
</style>
</head>
<body>

	<br />
	My tests show good results for this button using the twitter bird colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter fa-lg"></i></button>	
        </div>
	</div>

    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


Now add a google-plus icon with the correct font and colors.

Example 05 (button05.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons - Example 1</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
<style>
.twitter-button {
	color: white;
	background: #00b0ed;
	background-image: -moz-linear-gradient(top, #00b0ed 0%, #1b8cba 50%, #1588b4 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b0ed), color-stop(50%,#1b8cba), to(#1588b4));
	background-image: -webkit-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -o-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -ms-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	background-image: linear-gradient(to bottom, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0ed', endColorstr='#1b8cba',GradientType=0 );
}
.twitter-button:hover {
	color: #00b0ed;
	background-image: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); 
}
.google-plus-button {
	color: white;
	background: #dd4b39;
}
.google-plus-button:hover {
	color: #dd4b39;
	background: white;
}
</style>
</head>
<body>

	<br />
	My tests show good results for this button using the twitter bird colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter fa-lg"></i></button>	
        </div>
	</div>
	<br />
	My tests show good results for this button using the google plus colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default google-plus-button"><i class="fa fa-google-plus fa-lg"></i></button>	
        </div>
	</div>

    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


And a Facebook icon. This includes moving the "f" to a non-center position.

Example 06 (button06.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons - Example 1</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
<style>
.twitter-button {
	color: white;
	background: #00b0ed;
	background-image: -moz-linear-gradient(top, #00b0ed 0%, #1b8cba 50%, #1588b4 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b0ed), color-stop(50%,#1b8cba), to(#1588b4));
	background-image: -webkit-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -o-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -ms-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	background-image: linear-gradient(to bottom, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0ed', endColorstr='#1b8cba',GradientType=0 );
}
.twitter-button:hover {
	color: #00b0ed;
	background-image: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); 
}
.google-plus-button {
	color: white;
	background: #dd4b39;
}
.google-plus-button:hover {
	color: #dd4b39;
	background: white;
}
.facebook-button {
	color: white;
	background: rgb(59,89,152);
}
.facebook-button i {
	position: relative;
	top: 9px;
	left: 8px;
	font-size: 1.8em;
}
.facebook-button:hover {
	color: rgb(59,89,152);
	background: white;
}
</style>
</head>
<body>

	<br />
	My tests show good results for this button using the twitter bird colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter fa-lg"></i></button>	
        </div>
	</div>
	<br />
	My tests show good results for this button using the google plus colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default google-plus-button"><i class="fa fa-google-plus fa-lg"></i></button>	
        </div>
	</div>
	<br />
	And now for a facebook icon in facebook color.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default facebook-button"><i class="fa fa-facebook fa-lg"></i></button>	
        </div>
	</div>


    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


And the final results with RSS and an email icon added.

Example 07 (button07.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons - Example 1</title>
    <link rel="stylesheet" type="text/css" href="3.0.1/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">	
<style>
.twitter-button {
	color: white;
	background: #00b0ed;
	background-image: -moz-linear-gradient(top, #00b0ed 0%, #1b8cba 50%, #1588b4 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b0ed), color-stop(50%,#1b8cba), to(#1588b4));
	background-image: -webkit-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -o-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%);
	background-image: -ms-linear-gradient(top, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	background-image: linear-gradient(to bottom, #00b0ed 0%,#1b8cba 50%, #1588b4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0ed', endColorstr='#1b8cba',GradientType=0 );
}
.twitter-button:hover {
	color: #00b0ed;
	background-image: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); 
}
.google-plus-button {
	color: white;
	background: #dd4b39;
}
.google-plus-button:hover {
	color: #dd4b39;
	background: white;
}
.facebook-button {
	color: white;
	background: rgb(59,89,152);
}
.facebook-button i {
	position: relative;
	top: 9px;
	left: 8px;
	font-size: 1.8em;
}
.facebook-button:hover {
	color: rgb(59,89,152);
	background: white;
}
.rss-button {
	color: white;
	background: orange;
	margin-left: 5px;		
	margin-right: 5px;		
}
.rss-button i {
	position: relative;
	top: 5px;
	left: -3px;
	line-height: 0.6em;
	font-size: 1.8em;
}
.rss-button:hover {
	color: orange;
	background: white;
	margin-left: 5px;		
	margin-right: 5px;		
} 
.email-button {
	margin-left: 5px;		
	margin-right: 5px;		
}
.email-button:hover {
	margin-left: 5px;		
	margin-right: 5px;		
} 


</style>
</head>
<body>

	<br />
	My tests show good results for this button using the twitter bird colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default twitter-button"><i class="fa fa-twitter fa-lg"></i></button>	
        </div>
	</div>
	<br />
	My tests show good results for this button using the google plus colors.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default google-plus-button"><i class="fa fa-google-plus fa-lg"></i></button>	
        </div>
	</div>
	<br />
	And now for a facebook icon in facebook color.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default facebook-button"><i class="fa fa-facebook fa-lg"></i></button>	
        </div>
	</div>

	<br />
	And now for a RSS in orange.  The original orange color seems to attract more attention than other colors for this.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default rss-button social-button-dark"><i class="fa fa-rss fa-lg"></i></button>	
        </div>
	</div>

	<br />
	And now for an email icon.  I think you can pick whatever color you want for this.
	<br />
	<br />
    <div id="social-buttons">
        <div class="container">
			<button type="button" class="btn btn-lg btn-default email-button social-button-dark"><i class="fa fa-envelope fa-lg"></i></button>	
        </div>
	</div>

    <script src="js/jquery-latest.js"></script>
    <script src="3.0.1/js/bootstrap.min.js"></script>

</body>
</html>


And this is how it looks in the final page with a dark background.

Credits

Picture of Utah looking at the mountains: © C.R.Schlump - used with permission.


•       •       •       •       •       •

Summary: # of Words: 774
Author: Philip J. Schlump
Published On: 2013-10-17

Download code from this articles in .tar.gz for Mac/Linux/Unix or .zip with CR/LF for Windows format.

 

Before You Go....

Have you read "Unintend Consinsequences"?

"I laughed so hard it hurt..."
    Rod Brown

"Incredibly funny! Incredibly true!"
    Tad Stevens