A CSS only Facebook button

I threw this together in twenty-odd minutes for a talk. I haven’t cross browser debugged it.

In Chrome, it looks fine. In Firefox it needs some work. My recommendation is to replace the CSS version of the button with the official version once the window load event fires, so after ALL your other assets have loaded.

Demo, not production ready!


<a href="https://facebook.com/client"
  class="fb-like js-fb-like">
    <i class="ico ico-fb"></i>
    Like<span> us on Facebook</span>

The CSS (which is particularly not production ready):

.fb-like {
  -webkit-font-smoothing: antialiased;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;

  text-decoration: none;
  text-shadow: 0 -1px 0 #354c8c;
  vertical-align: top;
  white-space: nowrap;

  color: #fff;
  background: linear-gradient(#4c69ba, #3b55a0);

  box-sizing: border-box;
  display: inline-block;
  height: 20px;
  padding: 5px 5px 0 4px;

  border: 0;
  border-radius: 2px;

.fb-like span {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);

.fb-like .ico {
  background-image: url(//fbstatic-a.akamaihd.net/rsrc.php/v2/y5/r/KxVPs0eEy36.png);
  background-size: 30px 72px;
  background-repeat: no-repeat;
  background-position: 0 -42px;
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-top: -2px;

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.