Flat UI Social Networks Login Buttons Using Twitter Bootstrap

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

In the modern web development Flat UI design are so popular, I made Flat UI login buttons for all social networks login authentication.

Flat UI Social Networks Login 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 login buttons for all social network login using html <button> tag.

<div class="container-fluid">
			<h1 class="text-center">Flat UI Social Login Buttons</h1>
			<div class="row">
				<div class="col-md-offset-3 col-lg-offset-3 col-md-3 col-lg-3 social-icons">
					<a href='#' class="btn btn-default facebook"> <i class="fa fa-facebook modal-icons"></i> Sign In with Facebook </a>
					<a href='#' class="btn btn-default twitter"> <i class="fa fa-twitter modal-icons"></i> Sign In with Twitter </a>
					<a href='#' class="btn btn-default google"> <i class="fa fa-google-plus modal-icons"></i> Sign In with Google </a>
					<a href='#' class="btn btn-default linkedin"> <i class="fa fa-linkedin modal-icons"></i> Sign In with Linkedin </a>
					<a href='#' class="btn btn-default vimeo"> <i class="fa fa-vimeo-square modal-icons"></i> Sign In with Vimeo </a>
				</div>
				<div class="col-md-3 col-lg-3 social-icons">
					<a href='#' class="btn btn-default flickr"> <i class="fa fa-flickr modal-icons"></i> Sign In with Flickr </a>
					<a href='#' class="btn btn-default pinterest"> <i class="fa fa-pinterest modal-icons"></i> Sign In with Pinterest </a>
					<a href='#' class="btn btn-default instagram"> <i class="fa fa-instagram modal-icons"></i> Sign In with Instagram </a>
					<a href='#' class="btn btn-default foursquare"> <i class="fa fa-foursquare modal-icons"></i> Sign In with Foursquare </a>
					<a href='#' class="btn btn-default tumblr"> <i class="fa fa-tumblr modal-icons"></i> Sign In with Tumblr </a>
				</div>
			</div>
		</div>

Step 3:

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

body{min-height: 2000px;}
h1{border-bottom-color: #FF0084;border-bottom-style: solid;color: #FF0084;font-family: 'Philosopher';margin-left: 20%;padding: 5% 0 0;width: 60%;}
.social-icons{padding:0 1%;}
.social-icons i {font-size:18px;}
.facebook, .twitter, .google, .linkedin, .foursquare, .vimeo, .flickr, .pinterest, .instagram, .tumblr {width:100%;height:40px; padding-top:2%; margin-top:2%;}
.modal-icons{margin-left: -10px; margin-right: 20px;}
.google, .google:hover{background-color:#dd4b39;border:2px solid #dd4b39;color:#fff;}
.twitter, .twitter:hover{ background-color: #00aced; border:2px solid #00aced;color: #fff;}
.facebook, .facebook:hover{background-color: #3b5999; border:2px solid #3b5999;color:#fff;}
.linkedin, .linkedin:hover{background-color: #007bb6; border: 2px solid #007bb6; color:#fff;}
.vimeo, .vimeo:hover{ background-color: #aad450; border: 2px solid #aad450; color:#fff; }
.flickr, .flickr:hover{ background-color: #ff0084; border: 2px solid #ff0084; color:#fff; }
.foursquare, .foursquare:hover{ background-color: #0072b1; border: 2px solid #0072b1; color:#fff;}
.pinterest, .pinterest:hover{  background-color: #cb2027; border: 2px solid #cb2027; color:#fff; }
.instagram, .instagram:hover{ background-color: #517fa4; border: 2px solid #517fa4; color:#fff; } 
.tumblr, .tumblr:hover { background-color: #32506d; border: 2px solid #32506d; color:#fff; }

 .