We'll continue from where we left off in the earlier video. I think our styling is coming along well, and is looking close to the Google homepage.

Moving on, we'll style the buttons now.

If you look at the Google homepage, the buttons are lighter and have rounded corners. Go to styles.css, and define style for an ID called "search-buttons".

We'll have a value of "both" for the clear attribute, and give a margin on the top. Next, for the button class, we'll round the corners by 2px, and play around a little with the width and height. We'll also change the background color to a grayish white, and the font color to a charcoal color. If you see, I'm using a hexadecimal value for each color, and I picked these values from Photoshop. You can use any color editor you like to get the hexadecimal value of the color you want. Then, we'll have a value of "relative" to the position attribute, so they are side to side. We'll also change the font-size to 0.8em, and the font-family to "Arial". We'll align the text to center, and increase the weight of the font to 600, to make it bold. Lastly, we'll have a margin of 5px on all sides except the top, and a border that is 0px thick, solid and white in color.

#search-buttons {
  clear: both;
  margin-top: 30px;
}

.button {
  border-radius: 2px;
  width: 140px;
  height: 40px;
  background-color: #f3f3f3;
  color: #686363;
  position: relative;
  font-size: .80em;
  font-family: Arial;
  text-align: center;
  font-weight: 600;
  margin: 0px 5px 5px 5px;
  border: 0px solid white;
}

Let's see what this looks like on the browser.

I think it looks a lot similar to the Google homepage now.

We'll move to the footer now.

Let's start with a position of "absolute", and we'll have it on the left and bottom of the page, so both these attributes take a value of "0px". We'll have a 1px, solid and light gray border on the top, text aligned to the right, width 100%, background color of white, and the bottom margin to be set to 0px.

footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  border-top: 1px solid #d1d1d1;
  text-align: right;
  width: 100%;
  background-color: white;
  margin-bottom: 0px;
}

Now, this alone doesn't do much, so we'll have to define more styles. Let's do it for the ul and li tags, like we did for the header.

footer ul li {
  display: inline-block;
  margin: 10px;
}

Next, we'll work on the footer-right and footer-left IDs. For the latter, we'll define the float attribute to have a value "left", and for the former, we'll have the float attribute point to "right". Also, for footer-right, we'll have a margin on the right to a value of 30px.

#footer-left {
  float: left;
}

#footer-right {
  float: right;
  margin-right: 30px;
}

If we check the browser now, it looks like this:

And this is quite close to what we want.