Building standard buttons

Our starting point has us a long way to go, but it should be pretty easy:

Let's jump into the HTML of our secondary section:

I'll add the class of button to all three anchor elements at the bottom of each column.

<a href="#" class="button">Tenticals &raquo;</a>

Now, jumping down to the bottom of our CSS, let's add a huge comment for our new section and name "Buttons".

/****************
Buttons
****************/

This is where all our button styles will go.

What we want to do is create the .button selector. All the stylistic properties that are shared across buttons will go here. We won't put any positioning properties in the button selector because buttons could be positioned anywhere:

/****************
Buttons
****************/
.button {
}

Let's start by adding a border. We'll go with two pixels solid and a dark gray color. We'll apply the same color to the text:

.button {
   border: 2px solid #333;
   color: #333;
}

After saving and refreshing the browser it starts to ever so slightly resemble a button:

We now need to add some padding. Let's go back to our CSS and use the two-value padding shorthand: 10px for the top and bottom, and 0px for the left and right. This is because we're going to end up centering the text. Let's also change the display property to block because these are inline elements and we want them to behave like block-level elements:

.button{
   border: 2px solid #333;
   color: #333;
   padding: 10px 0;
   display: block;
}

Save this, refresh the browser, and see the effect:

As you can see, we now have to add some text-level properties. First, let's add a font family. We'll go with the typical sans-serif stack: Arial, Helvetica, sans-serif. Then, use the text-align property to align the text in the center of the element. We'll also set the font-weight to bold, then use another property called letter-spacing and add a value of 1.5px. If you're not familiar with the letter-spacing property, it does pretty much what you think it does—it creates a horizontal space between each letter:

/****************
Buttons
****************/
.button{
  border: 2px solid #333;
  color: #333;
  padding: 10px 0;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1.5px;
}

Once we save this and refresh the site, we will have our button elements. There's no hover state yet; we'll get into that in another section:

If you go over to the movies page now, you will see the Learn More links there, which need to be buttons as well:

So let's jump over to that markup in the shark-movies.html file, and do the same thing. Add the class of button to each anchor tag at the bottom of each movie section:

<a href="" class="button">Learn More</a>

Save this and refresh, and you'll get a button instantly:

It sort of works; we have a button, but not entirely. They look like buttons but they are of the wrong color, too wide, and not positioned to the right. Also, the text doesn't contrast well with the background, especially in darker sections. So there is some fixing we have to do, essentially because these buttons are different to the ones on the home page, which were full-width buttons.

Let's go ahead and fix those buttons now and look at how we can get even more modular and add multiple classes in order to vary the buttons.