<link href="http://webdesignerwall.com/demo/css-social-buttons/social-buttons.css" rel="stylesheet">

<div style="color:blue; font-size:24px;">PURE CSS Social Buttons</div>
<p>by <a href="https://twitter.com/nickla" target="_blank">@nickla</a>, <a href="http://webdesignerwall.com" target="_blank">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/css-social-buttons" target="_blank">related article</a>)</p>
  
  <p>
The basic styles work on any browser. It is 100% free for any purpose. Feel free to extend and share it. 
Basically, it is one master stylesheet that contains various design styles. It allows you to display many different button styles by combining the CSS classes. 
</p>

<h2>Default</h2>
<p>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb twitter">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb facebook">Facebook</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb heart">Heart</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb linkedin">LinkedIn</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb pinterest">Pinterest</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb podcast">Podcast</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb rss">RSS</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb share_this">Share</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb star">Star</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb vimeo">Vimeo</a>
</p>

<h2>Sizes</h2>

<h3>small, default, large</h3>
<p>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb small twitter">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb twitter">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb large twitter">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb small facebook">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb facebook">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb large facebook">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb small pinterest">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb pinterest">Twitter</a>
  <a href="http://webdesignerwall.com/demo/css-social-buttons/#" class="sb large pinterest">Twitter</a>
</p>

<h2>Styles</h2>

<h3>min</h3>
<p>
  <a href="#" class="sb min twitter">Twitter</a>
  <a href="#" class="sb min facebook">Facebook</a>
  <a href="#" class="sb min heart">Heart</a>
  <a href="#" class="sb min linkedin">LinkedIn</a>
  <a href="#" class="sb min pinterest">Pinterest</a>
  <a href="#" class="sb min podcast">Podcast</a>
  <a href="#" class="sb min rss">RSS</a>
  <a href="#" class="sb min share_this">Share</a>
  <a href="#" class="sb min star">Star</a>
  <a href="#" class="sb min vimeo">Vimeo</a>
</p>

<h3>flat</h3>
<p>
  <a href="#" class="sb flat twitter">Twitter</a>
  <a href="#" class="sb flat facebook">Facebook</a>
  <a href="#" class="sb flat heart">Heart</a>
  <a href="#" class="sb flat linkedin">LinkedIn</a>
  <a href="#" class="sb flat pinterest">Pinterest</a>
  <a href="#" class="sb flat podcast">Podcast</a>
  <a href="#" class="sb flat rss">RSS</a>
  <a href="#" class="sb flat share_this">Share</a>
  <a href="#" class="sb flat star">Star</a>
  <a href="#" class="sb flat vimeo">Vimeo</a>
</p>

<h3>cicle</h3>
<p>
  <a href="#" class="sb circle twitter">Twitter</a>
  <a href="#" class="sb circle facebook">Facebook</a>
  <a href="#" class="sb circle heart">Heart</a>
  <a href="#" class="sb circle linkedin">LinkedIn</a>
  <a href="#" class="sb circle pinterest">Pinterest</a>
  <a href="#" class="sb circle podcast">Podcast</a>
  <a href="#" class="sb circle rss">RSS</a>
  <a href="#" class="sb circle share_this">Share</a>
  <a href="#" class="sb circle star">Star</a>
  <a href="#" class="sb circle vimeo">Vimeo</a>
</p>

<h3>embossed</h3>
<p>
  <a href="#" class="sb embossed twitter">Twitter</a>
  <a href="#" class="sb embossed facebook">Facebook</a>
  <a href="#" class="sb embossed heart">Heart</a>
  <a href="#" class="sb embossed linkedin">LinkedIn</a>
  <a href="#" class="sb embossed pinterest">Pinterest</a>
  <a href="#" class="sb embossed podcast">Podcast</a>
  <a href="#" class="sb embossed rss">RSS</a>
  <a href="#" class="sb embossed share_this">Share</a>
  <a href="#" class="sb embossed star">Star</a>
  <a href="#" class="sb embossed vimeo">Vimeo</a>
</p>

<h3>pressed</h3>
<p>
  <a href="#" class="sb pressed twitter">Twitter</a>
  <a href="#" class="sb pressed facebook">Facebook</a>
  <a href="#" class="sb pressed heart">Heart</a>
  <a href="#" class="sb pressed linkedin">LinkedIn</a>
  <a href="#" class="sb pressed pinterest">Pinterest</a>
  <a href="#" class="sb pressed podcast">Podcast</a>
  <a href="#" class="sb pressed rss">RSS</a>
  <a href="#" class="sb pressed share_this">Share</a>
  <a href="#" class="sb pressed star">Star</a>
  <a href="#" class="sb pressed vimeo">Vimeo</a>
</p>

<h3>thick-border</h3>
<p>
  <a href="#" class="sb thick-border twitter">Twitter</a>
  <a href="#" class="sb thick-border facebook">Facebook</a>
  <a href="#" class="sb thick-border heart">Heart</a>
  <a href="#" class="sb thick-border linkedin">LinkedIn</a>
  <a href="#" class="sb thick-border pinterest">Pinterest</a>
  <a href="#" class="sb thick-border podcast">Podcast</a>
  <a href="#" class="sb thick-border rss">RSS</a>
  <a href="#" class="sb thick-border share_this">Share</a>
  <a href="#" class="sb thick-border star">Star</a>
  <a href="#" class="sb thick-border vimeo">Vimeo</a>
</p>

<h3>no-border</h3>
<p>
  <a href="#" class="sb no-border twitter">Twitter</a>
  <a href="#" class="sb no-border facebook">Facebook</a>
  <a href="#" class="sb no-border heart">Heart</a>
  <a href="#" class="sb no-border linkedin">LinkedIn</a>
  <a href="#" class="sb no-border pinterest">Pinterest</a>
  <a href="#" class="sb no-border podcast">Podcast</a>
  <a href="#" class="sb no-border rss">RSS</a>
  <a href="#" class="sb no-border share_this">Share</a>
  <a href="#" class="sb no-border star">Star</a>
  <a href="#" class="sb no-border vimeo">Vimeo</a>
</p>

<h3>no-shadow</h3>
<p>
  <a href="#" class="sb no-shadow twitter">Twitter</a>
  <a href="#" class="sb no-shadow facebook">Facebook</a>
  <a href="#" class="sb no-shadow heart">Heart</a>
  <a href="#" class="sb no-shadow linkedin">LinkedIn</a>
  <a href="#" class="sb no-shadow pinterest">Pinterest</a>
  <a href="#" class="sb no-shadow podcast">Podcast</a>
  <a href="#" class="sb no-shadow rss">RSS</a>
  <a href="#" class="sb no-shadow share_this">Share</a>
  <a href="#" class="sb no-shadow star">Star</a>
  <a href="#" class="sb no-shadow vimeo">Vimeo</a>
</p>

<h3>gradient</h3>
<p>
  <a href="#" class="sb gradient twitter">Twitter</a>
  <a href="#" class="sb gradient facebook">Facebook</a>
  <a href="#" class="sb gradient heart">Heart</a>
  <a href="#" class="sb gradient linkedin">LinkedIn</a>
  <a href="#" class="sb gradient pinterest">Pinterest</a>
  <a href="#" class="sb gradient podcast">Podcast</a>
  <a href="#" class="sb gradient rss">RSS</a>
  <a href="#" class="sb gradient share_this">Share</a>
  <a href="#" class="sb gradient star">Star</a>
  <a href="#" class="sb gradient vimeo">Vimeo</a>
</p>

<h3>glossy</h3>
<p>
  <a href="#" class="sb glossy gray twitter">Twitter</a>
  <a href="#" class="sb glossy gray facebook">Facebook</a>
  <a href="#" class="sb glossy gray heart">Heart</a>
  <a href="#" class="sb glossy gray linkedin">LinkedIn</a>
  <a href="#" class="sb glossy gray pinterest">Pinterest</a>
  <a href="#" class="sb glossy gray podcast">Podcast</a>
  <a href="#" class="sb glossy gray rss">RSS</a>
  <a href="#" class="sb glossy gray share_this">Share</a>
  <a href="#" class="sb glossy gray star">Star</a>
  <a href="#" class="sb glossy gray vimeo">Vimeo</a>
</p>

<h3>text</h3>
<p>
  <a href="#" class="sb text twitter">Twitter</a>
  <a href="#" class="sb text facebook">Facebook</a>
  <a href="#" class="sb text heart">Heart</a>
  <a href="#" class="sb text linkedin">LinkedIn</a>
  <a href="#" class="sb text pinterest">Pinterest</a>
  <a href="#" class="sb text podcast">Podcast</a>
  <a href="#" class="sb text rss">RSS</a>
  <a href="#" class="sb text share_this">Share</a>
  <a href="#" class="sb text star">Star</a>
  <a href="#" class="sb text vimeo">Vimeo</a>
</p>

<h2>Colors + Styles</h2>

<h3>default</h3>
<p>
  <a href="#" class="sb twitter">Twitter</a>
  <a href="#" class="sb blue twitter">Twitter</a>
  <a href="#" class="sb purple twitter">Twitter</a>
  <a href="#" class="sb red twitter">Twitter</a>
  <a href="#" class="sb green twitter">Twitter</a>
  <a href="#" class="sb orange twitter">Twitter</a>
  <a href="#" class="sb brown twitter">Twitter</a>
  <a href="#" class="sb black twitter">Twitter</a>
  <a href="#" class="sb gray twitter">Twitter</a>
  <a href="#" class="sb light-gray twitter">Twitter</a>
  <a href="#" class="sb light-blue twitter">Twitter</a>
  <a href="#" class="sb light-purple twitter">Twitter</a>
  <a href="#" class="sb pink twitter">Twitter</a>
  <a href="#" class="sb light-green twitter">Twitter</a>
  <a href="#" class="sb yellow twitter">Twitter</a>
</p>

<h3>flat</h3>
<p>
  <a href="#" class="sb flat twitter">Twitter</a>
  <a href="#" class="sb flat blue twitter">Twitter</a>
  <a href="#" class="sb flat purple twitter">Twitter</a>
  <a href="#" class="sb flat red twitter">Twitter</a>
  <a href="#" class="sb flat green twitter">Twitter</a>
  <a href="#" class="sb flat orange twitter">Twitter</a>
  <a href="#" class="sb flat brown twitter">Twitter</a>
  <a href="#" class="sb flat black twitter">Twitter</a>
  <a href="#" class="sb flat gray twitter">Twitter</a>
  <a href="#" class="sb flat light-gray twitter">Twitter</a>
  <a href="#" class="sb flat light-blue twitter">Twitter</a>
  <a href="#" class="sb flat light-purple twitter">Twitter</a>
  <a href="#" class="sb flat pink twitter">Twitter</a>
  <a href="#" class="sb flat light-green twitter">Twitter</a>
  <a href="#" class="sb flat yellow twitter">Twitter</a>
</p>

<h3>gradient</h3>
<p>
  <a href="#" class="sb gradient twitter">Twitter</a>
  <a href="#" class="sb gradient blue twitter">Twitter</a>
  <a href="#" class="sb gradient purple twitter">Twitter</a>
  <a href="#" class="sb gradient red twitter">Twitter</a>
  <a href="#" class="sb gradient green twitter">Twitter</a>
  <a href="#" class="sb gradient orange twitter">Twitter</a>
  <a href="#" class="sb gradient brown twitter">Twitter</a>
  <a href="#" class="sb gradient black twitter">Twitter</a>
  <a href="#" class="sb gradient gray twitter">Twitter</a>
  <a href="#" class="sb gradient light-gray twitter">Twitter</a>
  <a href="#" class="sb gradient light-blue twitter">Twitter</a>
  <a href="#" class="sb gradient light-purple twitter">Twitter</a>
  <a href="#" class="sb gradient pink twitter">Twitter</a>
  <a href="#" class="sb gradient light-green twitter">Twitter</a>
  <a href="#" class="sb gradient yellow twitter">Twitter</a>
</p>

<h3>gradient + glossy</h3>
<p>
  <a href="#" class="sb gradient glossy twitter">Twitter</a>
  <a href="#" class="sb gradient glossy blue twitter">Twitter</a>
  <a href="#" class="sb gradient glossy purple twitter">Twitter</a>
  <a href="#" class="sb gradient glossy red twitter">Twitter</a>
  <a href="#" class="sb gradient glossy green twitter">Twitter</a>
  <a href="#" class="sb gradient glossy orange twitter">Twitter</a>
  <a href="#" class="sb gradient glossy brown twitter">Twitter</a>
  <a href="#" class="sb gradient glossy black twitter">Twitter</a>
  <a href="#" class="sb gradient glossy gray twitter">Twitter</a>
  <a href="#" class="sb gradient glossy light-gray twitter">Twitter</a>
  <a href="#" class="sb gradient glossy light-blue twitter">Twitter</a>
  <a href="#" class="sb gradient glossy light-purple twitter">Twitter</a>
  <a href="#" class="sb gradient glossy pink twitter">Twitter</a>
  <a href="#" class="sb gradient glossy light-green twitter">Twitter</a>
  <a href="#" class="sb gradient glossy yellow twitter">Twitter</a>
</p>

<h3>gradient + glossy + embossed</h3>
<p>
  <a href="#" class="sb gradient glossy embossed twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed blue twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed purple twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed red twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed green twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed orange twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed brown twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed black twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed gray twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed light-gray twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed light-blue twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed light-purple twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed pink twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed light-green twitter">Twitter</a>
  <a href="#" class="sb gradient glossy embossed yellow twitter">Twitter</a>
</p>

<h3>circle + gradient + glossy + embossed</h3>
<p>
  <a href="#" class="sb circle gradient glossy embossed twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed blue twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed purple twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed red twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed green twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed orange twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed brown twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed black twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed gray twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed light-gray twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed light-blue twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed light-purple twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed pink twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed light-green twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy embossed yellow twitter">Twitter</a>
</p>

<h3>circle + no-border + no-shadow</h3>
<p>
  <a href="#" class="sb circle no-shadow no-border twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border blue twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border purple twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border red twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border green twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border orange twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border brown twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border black twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border gray twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border light-gray twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border light-blue twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border light-purple twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border pink twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border light-green twitter">Twitter</a>
  <a href="#" class="sb circle no-shadow no-border yellow twitter">Twitter</a>
</p>

<h3>flat + text</h3>
<p>
  <a href="#" class="sb flat text twitter">Twitter</a>
  <a href="#" class="sb flat text blue twitter">Twitter</a>
  <a href="#" class="sb flat text purple twitter">Twitter</a>
  <a href="#" class="sb flat text red twitter">Twitter</a>
  <a href="#" class="sb flat text green twitter">Twitter</a>
  <a href="#" class="sb flat text orange twitter">Twitter</a>
  <a href="#" class="sb flat text brown twitter">Twitter</a>
  <a href="#" class="sb flat text black twitter">Twitter</a>
  <a href="#" class="sb flat text gray twitter">Twitter</a>
  <a href="#" class="sb flat text light-gray twitter">Twitter</a>
  <a href="#" class="sb flat text light-blue twitter">Twitter</a>
  <a href="#" class="sb flat text light-purple twitter">Twitter</a>
  <a href="#" class="sb flat text pink twitter">Twitter</a>
  <a href="#" class="sb flat text light-green twitter">Twitter</a>
  <a href="#" class="sb flat text yellow twitter">Twitter</a>
</p>

<h3>circle + text + thick-border</h3>
<p>
  <a href="#" class="sb circle text thick-border twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border blue twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border purple twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border red twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border green twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border orange twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border brown twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border black twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border gray twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border light-gray twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border light-blue twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border light-purple twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border pink twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border light-green twitter">Twitter</a>
  <a href="#" class="sb circle text thick-border yellow twitter">Twitter</a>
</p>

<h3>circle + gradient + glossy + text + embossed</h3>
<p>
  <a href="#" class="sb circle gradient glossy text embossed twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed blue twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed purple twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed red twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed green twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed orange twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed brown twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed black twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed gray twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed light-gray twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed light-blue twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed light-purple twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed pink twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed light-green twitter">Twitter</a>
  <a href="#" class="sb circle gradient glossy text embossed yellow twitter">Twitter</a>
</p>

<h3>mix and match</h3>
<p>
  <a href="#" class="sb min twitter">Twitter</a>
  <a href="#" class="sb small text min facebook">Facebook</a>
  <a href="#" class="sb small blue facebook">Facebook</a>
  <a href="#" class="sb large red embossed heart">Heart</a>
  <a href="#" class="sb text embossed linkedin">LinkedIn</a>
  <a href="#" class="sb yellow gradient embossed pinterest">Pinterest</a>
  <a href="#" class="sb circle large embossed purple gradient podcast">Podcast</a>
  <a href="#" class="sb orange glossy rss">RSS</a>
  <a href="#" class="sb embossed green large text share_this">Share</a>
  <a href="#" class="sb orange flat small star">Star</a>
  <a href="#" class="sb pressed no-border blue large vimeo">Vimeo</a>
  <a href="#" class="sb thick-border light-gray large twitter">Twitter</a>
  <a href="#" class="sb text red large  gradient glossy embossed circle heart">Heart</a>
  <a href="#" class="sb flat small text rss light-blue">RSS</a>
  <a href="#" class="sb orange gradient text circle vimeo">Vimeo</a>
  <a href="#" class="sb black glossy text flat vimeo">Vimeo</a>
  <a href="#" class="sb blue circle no-border twitter">Twitter</a>
  <a href="#" class="sb orange pressed text star">Star</a>
</p>

<h2>Custom</h2>

<h3>add icons</h3>
<p>
  <a href="#" class="sb youtube">YouTube</a>
  <a href="#" class="sb email">Email</a>
  <a href="#" class="sb youtube text">YouTube</a>
  <a href="#" class="sb email text">Email</a>
</p>

<h3>custom icon</h3>
<p>
  <a href="#" class="sb custom retweet gradient embossed">Retweet</a>
  <a href="#" class="sb custom blue photo gradient embossed">Photo</a>
  <a href="#" class="sb custom pink comment gradient embossed">Comment</a>
</p>

<h2>Download More Icons</h2>
<p>The icons used in the demo are from the free <a href="http://icondock.com/free/mono-social-icons">Mono Social Icons</a> where you can download from <a href="http://icondock.com">IconDock</a>. The vector EPS version is included in the set. The other matching icons are from the <a href="http://icondock.com/icons/sets/rocky-complete-set">Rocky</a> icon set.</p>



body {
  background: #fff;
  font: 14px/140% Arial, Helvetica, sans-serif;
  color: #666;
  width: 800px;
  max-width: 80%;
  margin: 30px auto;
} 
p {
  margin: 0 0 10px;
}
a {
  color: #669;
  text-decoration: none;
}
h1, h2, h3 {
  color: #000;
}
h2, h3 {
  line-height: 110%;
}
h2 {
  font-size: 18px;
  margin: 30px 0 15px;
}
h3 {
  margin: 20px 0 10px;
  font-size: 12px;
  font-weight: normal;
  color: #999;
}


/* 

 CSS Social Buttons
Read more at: http://webdesignerwall.com/demo/css-social-buttons/#
http://webdesignerwall.com/tutorials/css-social-buttons
http://speckyboy.com/2012/05/15/20-more-css3-tutorials-and-techniques-for-creating-buttons/

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js