Invoice Script PHP jQuery

Flat UI Social Networks Login Buttons Using Twitter Bootstrap

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

 

Demo Social Networks Login Buttons Using Twitter Bootstrap

 

Flat UI Social Networks Login Buttons Using Twitter Bootstrap

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" />
JavaScript
Copy

 

Download Social Networks Login Buttons Using Bootstrap Script

 

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>
JavaScript
Copy

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

 

 .

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

Get Access Now Instantly

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.

Get Instant Script Download Access!

no thanks