CodePen Embed - social flat button


<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Magic button 0.1v</title>

		<!-- font-awesome -->
		<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

		<!-- Bootstrap -->
	

		<!--social-flat-button  -->
		<link href="css/social-flat-button.css" rel="stylesheet">

		<!--prettify  -->
		<link href="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet">
		<style type="text/css">
			body{
				background: #573E7E;
			}
			h1,h2,h3,h4,h5 {
				color: #fff;
			}
			.jumbotron{
				background: #bdc3c7;
			}
			.jumbotron>p{
				color: black;
			}
			a{
				color: #2AE5E5;
			}
			a:hover{
				color: #2AE5E5;
				text-decoration: none;
			}
			ul>li{
				display: inline-block;
				padding:10px;
				color: #fff;
			}
			p{
				color: #fff;
			}
			ol>li{
				color: #fff;
			}
			.dd{
				padding-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="jumbotron" align="center">
			<h1>Social Flat Button <small> in CSS</small></h1>
			<p>Flat, small and large size social media buttons using <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> and <a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>. Oh, and they're free too!</p>
			<p>Social Flat Button for Twitter Bootstrap</p>
			<p>
				<ul>
					<li>
						<a href="social-flat-button.zip" class="btn btn-primary btn-lg" role="button" target="_blank">Download Demo</a>
					</li>
					<li>
						<a href="css/social-flat-button.css" class="btn btn-primary btn-lg" role="button" target="_blank">Download CSS</a>
					</li>
				</ul>
			</p>
		</div><!-- jumbotron end -->
		<div class="container">
			<div class="row" align="center">
				<h2>Flat Social Button Small</h2>
				<ul>
					<li><button class="btn facebook-flat"><i class="fa fa-facebook fa-2x"></i></button>
					</li>
					<li><button class="btn twitter-flat"><i class="fa fa-twitter fa-2x"></i></button>
					</li>
					<li><button class="btn google-flat"><i class="fa fa-google-plus fa-2x"></i></button>
					</li>
					<li><button class="btn linkedin-flat"><i class="fa fa-linkedin fa-2x"></i></button>
					</li>
					<li><button class="btn github-flat"><i class="fa fa-github-alt  fa-2x"></i></button>
					</li>
					<li><button class="btn pinterest-flat"><i class="fa fa-pinterest fa-2x"></i></button>
					</li>
					<li><button class="btn dropbox-flat"><i class="fa fa-dropbox  fa-2x"></i></button>
					</li>
					<li><button class="btn flickr-flat"><i class="fa fa-flickr fa-2x"></i></button>
					</li>
					<li><button class="btn youtube-flat"><i class="fa fa-youtube fa-2x"></i></button>
					</li>
				</ul>
			</div>
			<!-- flat icon row end -->
			<div class="row" align="center">
				<h2>Flat Social Button Large</h2>
				<ul>
					<li><button class="btn facebook-flat large-facebook"><i class="fa fa-facebook fa-2x"></i></button>
					</li>
					<li><button class="btn twitter-flat large"><i class="fa fa-twitter fa-2x"></i></button>
					</li>
					<li><button class="btn google-flat large"><i class="fa fa-google-plus fa-2x"></i></button>
					</li>
					<li><button class="btn linkedin-flat large"><i class="fa fa-linkedin fa-2x"></i></button>
					</li>
					<li><button class="btn github-flat large"><i class="fa fa-github-alt  fa-2x"></i></button>
					</li>
					<li><button class="btn pinterest-flat large"><i class="fa fa-pinterest fa-2x"></i></button>
					</li>
					<li><button class="btn dropbox-flat large"><i class="fa fa-dropbox  fa-2x"></i></button>
					</li>
					<li><button class="btn flickr-flat large"><i class="fa fa-flickr fa-2x"></i></button>
					</li>
					<li><button class="btn youtube-flat large"><i class="fa fa-youtube fa-2x"></i></button>
					</li>
				</ul>
			</div>
			<!-- flat icon row end -->
			<hr>
			<div>
				<h2>Example usage</h2>
				<h4>Using this code for Small Button</h4>
				<div class="dd">
					<button class="btn google-flat"><i class="fa fa-google-plus fa-2x"></i></button>
				</div>
				<PRE class="prettyprint linenums lang-html" align="left">
&lt;button class=&quot;btn google-flat&quot;&gt;&lt;i class=&quot;fa fa-google-plus fa-2x&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		</PRE>
				<h4>Using this code for large Button</h4>
				<div class="dd">
					<button class="btn twitter-flat large"><i class="fa fa-twitter fa-2x"></i></button>
				</div>
				<PRE class="prettyprint linenums lang-html" align="left">
&lt;button class=&quot;btn twitter-flat large&quot;&gt;&lt;i class=&quot;fa fa-twitter fa-2x&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		</PRE>
				<h5>Note: if you add facebook large boutton than use this code</h5>
				<PRE class="prettyprint linenums lang-html" align="left">
&lt;button class=&quot;btn facebook-flat large-facebook&quot;&gt;&lt;i class=&quot;fa fa-facebook fa-2x&quot;&gt;&lt;/i&gt;&lt;/button&gt;
		</PRE>
			</div>
			<hr>
			<div>
				<h2>Quick installation</h2>
				<ol>
					<li>Download<a href="css/social-flat-button.css" target="_blank"> social-Flat-button.css</a> and include in your project. Done!</li>
				</ol>
			</div>
			<hr>
			<div>
				<h2>Installation</h2>
				<ol>
					<p>Full instructions can be found here, but basically:</p>
					<li>Navigate to the Github project.</li>
					<li>Use buttons!</li>
				</ol>
			</div>
			<hr>
			<div>
				<h2>Requirements</h2>
				<ol class="dd">
					<li><a href="https://getbootstrap.com/" target="_blank">Bootstrap 3.v or newer</a></li>
					<li><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome 4.0.3 or newer</a></li>
				</ol>
			</div>
		</div>
		<!-- container end -->
		<footer>
			<div align="center">
				<h5>made by <a href="https://github.com/dharmeshgohil" target="_blank">@DharmeshGohil</a></h5>
				<h5>Code licensed under<a href="https://github.com/dharmeshgohil" target="_blank">@DharmeshGohil</a></h5>
			</div>
		</footer>
		<script type="text/javascript">
			(function(jQuery){
				
			  jQuery( document ).ready( function() {
					
			    prettyPrint();
					
			  } );
			 
			}(jQuery))
				
		</script>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

		<!-- prettify (for html codeing style) -->
		<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
	</body>
</html>


.large-facebook{
	font-size: 20px;
	padding-top: 20px;
	padding-bottom: 60px;
	padding-left: 35px;
	padding-right: 50px;

}
/* large Button for All (note: not for facebook) */
.large{
	
	font-size: 20px;
	padding-top: 20px;
	padding-bottom: 60px;
	padding-left: 25px;
	padding-right: 60px;
}

.facebook-flat{
	height: 50px;
	width: 50px;
	color:#fff;
	background: #133783;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}
.facebook-flat:hover,
.facebook-flat:focus,
.facebook-flat:active,
.facebook-flat.active,
.facebook-flat.disabled,
.facebook-flat[disabled] {
  	color: #ffffff;
  	background-color: #133783;
  	*background-color: #102e6d;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}
/* twitter */
.twitter-flat{
	height: 50px;
	width: 50px;
	color:#fff;
	background: #00aced;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.twitter-flat:hover,
.twitter-flat:focus,
.twitter-flat:active,
.twitter-flat.active,
.twitter-flat.disabled,
.twitter-flat[disabled] {
  	color: #ffffff;
  	background-color: #00aced;
  	*background-color: #00aced;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

/* google+ */
.google-flat{
	height: 50px;
	width: 50px;
	color: #fff;
	background:  #dd4b39;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.google-flat:hover,
.google-flat:focus,
.google-flat:active,
.google-flat.active,
.google-flat.disabled,
.google-flat[disabled] {
  	color: #fff;
  	background-color:  #dd4b39;
  	*background-color:  #dd4b39;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

/* linkedin */
.linkedin-flat{
	height: 50px;
	width: 50px;
	color: #fff;
	background: #007bb6;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.linkedin-flat:hover,
.linkedin-flat:focus,
.linkedin-flat:active,
.linkedin-flat.active,
.linkedin-flat.disabled,
.linkedin-flat[disabled] {
  	color: #fff;
  	background-color: #007bb6;
  	*background-color: #007bb6;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

/* github */
.github-flat{
	height: 50px;
	width: 50px;
	color: black;
	background: #e6e6e6;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.github-flat:hover,
.github-flat:focus,
.github-flat:active,
.github-flat.active,
.github-flat.disabled,
.github-flat[disabled] {
  	color: black;
  	background-color: #e6e6e6;
  	*background-color: #e6e6e6;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

/* Pinterest */
.pinterest-flat{
	height: 50px;
	width: 50px;
	color: #fff;
	background: #cb2027;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.pinterest-flat:hover,
.pinterest-flat:focus,
.pinterest-flat:active,
.pinterest-flat.active,
.pinterest-flat.disabled,
.pinterest-flat[disabled] {
  	color: #fff;
  	background-color: #cb2027;
  	*background-color: #cb2027;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}
/* dropbox */
.dropbox-flat{
	height: 50px;
	width: 50px;
	color: #fff;
	background: #2e95e0;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.dropbox-flat:hover,
.dropbox-flat:focus,
.dropbox-flat:active,
.dropbox-flat.active,
.dropbox-flat.disabled,
.dropbox-flat[disabled] {
  	color: #fff;
  	background-color: #2e95e0;
  	*background-color: #2e95e0;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}
/* Flickr */
.flickr-flat{
	height: 50px;
	width: 50px;
	color: #fff;
	background: #ff0084;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.flickr-flat:hover,
.flickr-flat:focus,
.flickr-flat:active,
.flickr-flat.active,
.flickr-flat.disabled,
.flickr-flat[disabled] {
  	color: #fff;
  	background-color: #ff0084;
  	*background-color: #ff0084;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}
/* Youtube */
.youtube-flat{
	height: 50px;
	width: 50px;
	color: #fff;
	background: #bb0000;
	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

.youtube-flat:hover,
.youtube-flat:focus,
.youtube-flat:active,
.youtube-flat.active,
.youtube-flat.disabled,
.youtube-flat[disabled] {
  	color: #fff;
  	background-color: #bb0000;
  	*background-color: #bb0000;
  	border: none;

  	border-radius(0) !important;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	border:0px;
}

This Pen is owned by Dharmesh on CodePen.

See more by @dharmesh887 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.