<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">
<button class="btn google-flat"><i class="fa fa-google-plus fa-2x"></i></button>
</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">
<button class="btn twitter-flat large"><i class="fa fa-twitter fa-2x"></i></button>
</PRE>
<h5>Note: if you add facebook large boutton than use this code</h5>
<PRE class="prettyprint linenums lang-html" align="left">
<button class="btn facebook-flat large-facebook"><i class="fa fa-facebook fa-2x"></i></button>
</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;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* twitter */
.twitter-flat{
height: 50px;
width: 50px;
color:#fff;
background: #00aced;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* google+ */
.google-flat{
height: 50px;
width: 50px;
color: #fff;
background: #dd4b39;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* linkedin */
.linkedin-flat{
height: 50px;
width: 50px;
color: #fff;
background: #007bb6;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* github */
.github-flat{
height: 50px;
width: 50px;
color: black;
background: #e6e6e6;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* Pinterest */
.pinterest-flat{
height: 50px;
width: 50px;
color: #fff;
background: #cb2027;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* dropbox */
.dropbox-flat{
height: 50px;
width: 50px;
color: #fff;
background: #2e95e0;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* Flickr */
.flickr-flat{
height: 50px;
width: 50px;
color: #fff;
background: #ff0084;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
/* Youtube */
.youtube-flat{
height: 50px;
width: 50px;
color: #fff;
background: #bb0000;
border-radius(0) !important;
border-radius: 0px;
border-radius: 0px;
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;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
border:0px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.