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!

The HTML:

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

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;
}