Flat UI Social Networks Like Buttons Using Twitter Bootstrap

Posted 1:48 am by muni & filed under CSS, HTML5.

In the modern web development Flat UI design are so popular. In this tutorial  I made Flat UI UI Social networks LIKE buttons. Please follow this tutorial to make it yourself.

Flat UI Social Networks Like Buttons Using Twitter Bootstrap

Step 1:

Create index.html file and add following css files in the index.html.

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />

Step 2:

Create all Social Networks Like Buttons with div conatiner with button tag with appropriate width and height.

<div class="row">
				<div class="col-md-offset-3 col-lg-offset-3 col-md-6 col-lg-6">
					<div class="row">
						<div class="col-md-3 col-lg-3">
							<div class="facebook-like social-like"> <i class="fa fa-facebook"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="twitter-like social-like"> <i class="fa fa-twitter"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="google-like social-like"> <i class="fa fa-google-plus"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="linkedin-like social-like"> <i class="fa fa-linkedin"></i> </div>
						</div>	
					</div>
					<div class="clearfix"></div><br />
					<div class="row">
						<div class="col-md-3 col-lg-3">
							<div class="vimeo-like social-like"> <i class="fa fa-vimeo-square"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="flickr-like social-like"> <i class="fa fa-flickr"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="pinterest-like social-like"> <i class="fa fa-pinterest"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="instagram-like social-like"> <i class="fa fa-instagram"></i> </div>
						</div>	
					</div>

					<div class="clearfix"></div><br />
					<div class="row">
						<div class="col-md-3 col-lg-3">
							<div class="foursquare-like social-like"> <i class="fa fa-foursquare"></i> </div>
						</div>
						<div class="col-md-3 col-lg-3">
							<div class="tumblr-like social-like"> <i class="fa fa-tumblr"></i> </div>
						</div>

					</div>	
				</div>
			</div>

Step 3:

Add following css styles in style.css file to add styles and background colors to social network like buttons.

h1{border-bottom-color: #FF0084;border-bottom-style: solid;color: #FF0084;font-family: 'Philosopher';margin-left: 20%;padding: 2% 0 0;width: 60%;}   
.social-like {height:150px;}
.social-like i {font-size:50px;padding:40%;}
.facebook-like{ background-color: #3b5999; border:2px solid #3b5999;color:#fff; }
.twitter-like{ background-color: #00aced; border:2px solid #00aced;color:#fff; }
.google-like{ background-color: #dd4b39; border:2px solid #dd4b39;color:#fff; }
.linkedin-like{ background-color: #007bb6; border:2px solid #007bb6;color:#fff; }

.vimeo-like{ background-color: #aad450; border: 2px solid #aad450; color:#fff; }
.flickr-like{ background-color: #ff0084; border: 2px solid #ff0084; color:#fff; }
.foursquare-like{ background-color: #0072b1; border: 2px solid #0072b1; color:#fff;}
.pinterest-like{  background-color: #cb2027; border: 2px solid #cb2027; color:#fff; }
.instagram-like{ background-color: #517fa4; border: 2px solid #517fa4; color:#fff; } 
.tumblr-like { background-color: #32506d; border: 2px solid #32506d; color:#fff; }

 .