html

Create Facebook Blue Background Using HTML CSS

Written by Sarmad Gardezi November 29, 2017

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>

Free Online Image Hosting

Host your Images Online for free & use them on Website Blogs and Social Media.

Host Image Now Featured
Online Dictator

Convert your Speech into Text. You can either copy, Download or Share it Online for free.

Try it Now Popular
My First Tweet

Find first tweet on Twitter and retweet it to amaze people.

Lets Go! Trending

Subscribe to our Email Newsletter