Floating Social Media Icons
18
March
2015

In today’s post I will show you how to create manageable social buttons for your website.
a) First we will start with the basic html markup

<!doctype html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		
	</body>
	</html>

b) We Will link our stylesheet to our html page.


		<head>
			<meta charset="UTF-8">
			<title>Socail Icons</title>
			<link type="text/css" rel="stylesheet" href="index.css">
		</head>
	

c) Inside the body tags we will write


		<section id="social-icons">
			<section class="social-class" id="facebook">
				<a href="#"><img src="images/facebook.png" alt="facebook"/></a>
			</section>
			<section class="social-class" id="youtube">
				<a href="#"><img src="images/youtube.png" alt="Youtube"/></a>
			</section>
			<section class="social-class" id="google-plus">
				<a href="#"><img src="images/google-plus.png" alt="google-plus"/></a>
			</section>
			<section class="social-class" id="pinterest">
				<a href="#"><img src="images/pinterest.png" alt="pinterest"/></a>
			
			<section class="social-class" id="skype">
				<a href="#"><img src="images/skype.png" alt="skype"/></a>
			</section>
		</section>
		<section id="main-container">
			
	    </section>
	

d) In our index.css

 
		*{
			border:0px;
			padding:0px;
			margin:0px;
			box-sizing:border-box;
		}
	

The above code will override the existing browser styles, as diffrent browsers use diffrent styles so we need to override these rules

 
		
		#main-container{
			width:960px;
			margin-right:auto;
			margin-left:auto;
			border:1px solid #ccc; /*** Border is provided for demostration purpose ***/
			min-height:1600px; /*** Border is provided for demostration purpose ***/
		}
	

This is the main section of our site, whole site will be going inside of this main-container

 
		#social-icons{
			width:50px;
			position:fixed;
			top:20%;
			left:2%;
		}
	

position:fixed is used so the this element will be displayed at the fixed position with respect to the body element. so that when we scroll this element is always displayed

 
		.social-class{
			width:40px;
			height:40px;
			margin-right:auto;
			margin-left:auto;
			margin-top:5px;
		}
		@media(max-width:1100px){
			#social-icons{
			display:none;
		  }
		}
	

media query is used so that when our browser size descreases at that time social-icons element don’t overlap the main-container, when the screen max-width reaches 1100px then social-icons will be hidden
Final result will be same as below :::
social-media-icons

  • 714 View
  • Pin It