Facebook Blue Background in CSS

Our Facebook Page just touched the magical 150k mark and, to celebrate, I created a little page in HTML & CSS that has the Facebook Like button in the absolute center while the page background is filled with a blue gradient, very similar to the color scheme used in the official Facebook logo.

Facebook Like button on Blue Background

Here’s the code for styling the page:

<style type="text/css">
  .ac {
    height: 40px;
    width: 100px;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: 9999;
  }

  .cc {
    position: relative;
  }

  body {
    overflow: hidden;
    height: 10000px;
    width: 100%;
    background-color: #2b4170;
    background: -moz-linear-gradient(top, #3b5998, #2b4170);
    background: -ms-linear-gradient(top, #3b5998, #2b4170);
    background: -webkit-linear-gradient(top, #3b5998, #2b4170);
    border: 1px solid #2b4170;
    text-shadow: 0 -1px -1px #1f2f52;
  }
</style>

.. and here’s the actual HTML that puts the LIKE button in the center of the blue Facebook page.

<body>
  <div class="cc">
    <div class="ac">
      <iframe
        src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fdigital.inspiration&amp;width=100px&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21"
        scrolling="no"
        frameborder="0"
        style="border:none; overflow:hidden; width:100px; height:21px;"
        allowTransparency="true"
      ></iframe>
    </div>
  </div>
</body>

Awards & Recognition