Facebook Button using Bootstrap

See the Pen
Facebook Button for Bootstrap
by Brandon Himpfen (@brandonhimpfen)
on CodePen.

HTML

<a href="#" title="Facebook" class="btn btn-facebook btn-lg"><i class="fa fa-facebook fa-fw"></i> Facebook</a>

CSS

.btn-facebook {
	  background: #3B5998;
	  border-radius: 0;
	  color: #fff;
	  border-width: 1px;
	  border-style: solid;
	  border-color: #263961; 
	}
	.btn-facebook:link, .btn-facebook:visited {
	  color: #fff;
	}
	.btn-facebook:active, .btn-facebook:hover {
	  background: #263961;
	  color: #fff;
	}

highlight.js Example

See the Pen
highlight.js Example
by Brandon Himpfen (@brandonhimpfen)
on CodePen.

HTML

<div class="container">
<pre><code class="javascript">
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
</code></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Search Button using Bootstrap

See the Pen Search Button using Bootstrap by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="container">
<div class="input-group">
	<input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-search" type="button"><i class="fa fa-search fa-fw"></i> Search</button>
      </span>
</div>
</div>

CSS

.btn-search {
	  background: #424242;
	  border-radius: 0;
	  color: #fff;
	  border-width: 1px;
	  border-style: solid;
	  border-color: #1c1c1c;
	}
	.btn-search:link, .btn-search:visited {
	  color: #fff;
	}
	.btn-search:active, .btn-search:hover {
	  background: #1c1c1c;
	  color: #fff;
	}