Create Facebook Blue Background Using HTML CSS

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. You can also use this code in wordpress & Google Apps Script.

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>

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>

Written By:

Sarmad Gardezi A blog scientist by Mind and a Passionate Blogger by heart. Sarmad is Freelancer, Entrepreneur and Google Apps Scripts Developer from Islamabad, Pakistan.

Subscribe to Email Newsletter