Flat UI Social Networks Like Buttons Using Twitter Bootstrap

Posted by & 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

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; }

 

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

%d bloggers like this:

Get Instant Script Download Access!