From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.10: Link Style

While you have been experimenting with CSS, you may have noticed something interesting happens when you change the color of a link. This causes the link to stay just the color that you have set it to. You no longer have different colors for visited links. Many elements have different states. When you set the element style, you are also applying that style to all the states of that element. CSS gets around this potential problem by letting you apply styles to the different states of an element by using the colon to indicate what state you are applying the style to. The anchor tag has four different states which are a:link, a:visited, a:hover, a:active.

An unvisited link uses the a:link, and represents the anchor when the link has never been clicked. Browsers tend to determine visited links by seeing if the link is in its history so this is not always accurate. When you have visited a link the a:visited definition gets displayed. This allows visited links to look different from unvisited links, though many sites set these to the same style.

The a:hover state is tied to the mouse pointer so has no real effect on touch-based input. When the mouse pointer is over the link then the hover style is shown. If the link is being clicked, and touching a link is the same as clicking a link, then the a:active state is displayed.

By taking advantage of the box model and link types, we can style a link to act like a button. First, we need to create a style that looks like a button. By taking advantage of rounded borders in combination with the style of the border we can start to create an element that looks like a button. One issue, however, is we want to make sure that the button box is considered. I am using buttons for navigation so my class will be called nav_btn, but I only want the button properties to be shown when it is an anchor. CSS supports doing this by letting you specify the element that you want and then how a class of that element will work:

While it is not necessary to specify the font properties for the button, fonts can be part of your design decision. Based on your needs you may want different defaults or no default and rely on the default font for the div the button is in. For my design I want a bold font with centered text. I want a font size of 15 points, with no text decorations. I want my button to be purple, so I am setting the background color to purple and the text to be a saturated purple. All of this is straightforward CSS attribute settings.

A solid block of color doesn’t really look like a button. I like my buttons to be slightly rounded with borders that look like the button is above the screen. Looking at borders, we can easily set rounded borders and looking at the different border styles, an outset border does have a button-like look to it, so we will use those.

Now we simply need to adjust the padding and margins of the font.

A bit of testing and we seem to have a bit of a problem. It seems the inline type of display that the button uses simply does not honor our padding. The display property lets us use inline to allow us to create spans, and blocks to allow us to create divs, but we want a span that enforces it’s container so we will be using a new display type called inline-block. This is a bit of an advanced feature which we will be covering in chapter 6 in more detail when we are discussing layouts. While we are using advanced features, lets also add a box shadow to the button to give it a bit more of a pop.

The result of all this work is a link that looks like a button. However, because we are overriding the anchor tag, this has the effect of also altering the hover and active states of the anchor. This means that moving the mouse over the button or clicking on the button does nothing to the button. It would be nice to have some effects happen when the mouse was over or the button was clicked. The states of an element can also be adjusted in a class so, we simply need to make some modifications to those states to get color changing effects to indicate that that something is happening with the button. We can also change the border style from outset to inset to try and create a button being pressed type of effect.

To use these buttons, you simply need to add the nav_btn class to an anchor such as:

And it is that easy to have fancy links for your pages. Making lists more interesting will be our next goal.

As this chapter was being released in December, a Christmas Total Conversion of this Chapter's project was released.