Creating beautiful SocialShare Icons in CSS3

Creating beautiful SocialShare Icons in CSS3

There are plenty of plugins that are available in the market for Social Share icons etc, such as MooTools and jQuery QuickSocial are the most prominent one. But what if we can create our own social sharing icons using simple CSS3 and bare HTML5, won’t that be cool?

So lets start and create this beautiful SocialShare icon in minutes, but before that  , here is the preview of the end result of what we are going to achieve.

 

For this you can open any HTML document and start, but i would recommend you to use HTML5BoilerPlate, as it carries most of the documents necessary for clearing browser-specific CSS3. Head over to HTML5BoilerPlate  and download the latest version, unzip and open the index.html file and add the following contents to it.

 

<div id="content">
  <input type="checkbox" class="checkbox" id="share" checked>
  <label for="share" class="label share">Share</label>
  <div class="social">
    <ul>
      <li class="zocial-twitter"></li>
      <li class="zocial-facebook"></li>
      <li class="zocial-googleplus"></li>
    </ul>
  </div>
</div>

Now open the main.css file (or any file you have linked), and add the following CSS to your file.

 

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* Zocial IconFonts Family */

[class*="zocial-"]:before {
	font-family: 'zocial', sans-serif;
}

::selection {
	background: transparent;
}

html {
	margin: 0;
	padding: 50px 0;
}

#content {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	padding: 120px 0 10px 0;
	text-align: center;
	width: 200px;
	height: 20px;
}

.checkbox:checked+.label {
	background: #7B7484;
	color: #231733;
}

input[type="checkbox"] {
	display: none;
}

.checkbox:checked~.social {
	opacity: 1;
	-webkit-transform: scale(1) translateY(-90px);
	-moz-transform: scale(1) translateY(-90px);
	-o-transform: scale(1) translateY(-90px);
	transform: scale(1) translateY(-90px);
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

.label {
	font-size: 16px;
	cursor: pointer;
	margin: 0;
	padding: 5px 10px;
	border-radius: 10%;
	color: #7B7484;
}

.social {
	transform-origin: 50% 0%;
	-webkit-transform: scale(0) translateY(-190px);
	-moz-transform: scale(0) translateY(-190px);
	-o-transform: scale(0) translateY(-190px);
	transform: scale(0) translateY(-190px);
	opacity: 0;
}

ul {
	position: relative;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	height: 46px;
	width: 180px;
	background: #3B5998;
	padding: 0;
	list-style: none;
}

ul li {
	font-size: 20px;
	cursor: pointer;
	width: 60px;
	margin: 0;
	padding: 12px 0;
	text-align: center;
	float: left;
	display: block;
	height: 22px;
}

ul:after {
	content: '';
	display: block;
	position: absolute;
	margin: 40px auto;
	height: 0;
	width: 0;
	left: 0;
	right: 0;
	border-left: 22px solid transparent;
	border-right: 22px solid transparent;
	border-top: 22px solid #3B5998;
}

ul li:hover {
	color: rgba(0, 0, 0, .8);
}

li[class*="twitter"] {
	background: #6CDFEA;
	padding: 12px 0;
}

li[class*="googleplus"] {
	background: #E34429;
	padding: 12px 0;
}

 

Now open up the index.html and you will have your delicious Social Share Icons right out of the box!

 

Note: You can add more Social Icons to this, just navigate here and Choose Zocial icon pack and add the appropriate icon label in the li section of your HTML code.

 

Good Luck!

As rated by readers
[Total: 0 Average: 0]
0

Leave a Reply

avatar
  Subscribe  
Notify of