Social Media Icons

index.html

		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<section>
		<ul class="social">
			<li><a class="ease-all facebook" href="#"><i class="fa fa-facebook"></i><span class="hide-text">Facebook</span></a></li>
			<li><a class="ease-all twitter" href="#"><i class="fa fa-twitter"></i><span class="hide-text">Twitter</span></a></li>
			<li><a class="ease-all youtube" href="#"><i class="fa fa-youtube"></i><span class="hide-text">YouTube</span></a></li>
		</ul>
</section>

Social-Media-Icons-.markdown

Social Media Icons

Animated social media icons with transitions

Forked from Tiffany Tse's Pen Social Media Icons .

A Pen by James Sterling on CodePen.

License.

style.css

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

section {
  width: 200px;
  margin: 0 auto;
}

.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.ease-all {
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

/* Social Icons */

.social {
	height: 10rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.social li a {
	display: inline-block;
	float: left;
	width: 40px;
	height: 40px;
	margin-right: 1rem;
	text-align: center;
	padding-top: 13px;
	
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
	-ms-border-radius:20px;
	border-radius:20px;
	
	color: #fff;
}


.facebook {
	-webkit-box-shadow: inset 0 0 0 40px #3b5998;
	-moz-box-shadow: inset 0 0 0 40px #3b5998;
	-o-box-shadow: inset 0 0 0 40px #3b5998;
	-ms-box-shadow: inset 0 0 0 40px #3b5998;
	box-shadow: inset 0 0 0 40px #3b5998;
}

.facebook:hover {
	-webkit-box-shadow: inset 0 0 0 3px #3b5998;
	-moz-box-shadow: inset 0 0 0 3px #3b5998;
	-o-box-shadow: inset 0 0 0 3px #3b5998;
	-ms-box-shadow: inset 0 0 0 3px #3b5998;
	box-shadow: inset 0 0 0 3px #3b5998;
  
  color: #3b5998;
}

.twitter {
	-webkit-box-shadow: inset 0 0 0 40px #00aced;
	-moz-box-shadow: inset 0 0 0 40px #00aced;
	-o-box-shadow: inset 0 0 0 40px #00aced;
	-ms-box-shadow: inset 0 0 0 40px #00aced;
	box-shadow: inset 0 0 0 40px #00aced;
}

.twitter:hover {
	-webkit-box-shadow: inset 0 0 0 3px #00aced;
	-moz-box-shadow: inset 0 0 0 3px #00aced;
	-o-box-shadow: inset 0 0 0 3px #00aced;
	-ms-box-shadow: inset 0 0 0 3px #00aced;
	box-shadow: inset 0 0 0 3px #00aced;
  
  color: #00aced;
}

.youtube {
	-webkit-box-shadow: inset 0 0 0 40px #bb0000;
	-moz-box-shadow: inset 0 0 0 40px #bb0000;
	-o-box-shadow: inset 0 0 0 40px #bb0000;
	-ms-box-shadow: inset 0 0 0 40px #bb0000;
	box-shadow: inset 0 0 0 40px #bb0000;
}

.youtube:hover {
	-webkit-box-shadow: inset 0 0 0 3px #bb0000;
	-moz-box-shadow: inset 0 0 0 3px #bb0000;
	-o-box-shadow: inset 0 0 0 3px #bb0000;
	-ms-box-shadow: inset 0 0 0 3px #bb0000;
	box-shadow: inset 0 0 0 3px #bb0000;
  
  color: #bb0000;
}