Buttons and Navigation Bars

With the knowledge that we have learned in the previous two lessons, we will now begin to build more complex visualizations with links.

Navigational Button

To begin lets create a single navigational button.  The button can be utilized as a buy now button or can be combined with other buttons to create a navigation area.  With Html5, there is now a specific syntax for buttons, which is <button>.

See the Pen Button-Link by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Navigational Button+ RGBA

Buttons can be styled just like any other element giving us full control over how they look. As you would expect you can use any of the usual color methods on the background or text. One of the color methods we’ve used in this example is rgba color. This adds an alpha (a) channel to a standard Red Green Blue (rgb) pallet. The alpha channel specifies the opacity of the objecting a number between 0.0 (fully transparent) and 1.0 (fully opaque). Similarly we can use hsla, which adds the alpha channel to hue / saturation / luminance values. We can also change the font size and add padding to make the button stand out more:

See the Pen WoeaxQ by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Navigational Button+ Border Radius

Instead of plain rectangular buttons we can add some curves by specifying the border-radius either in pixels or as a percentage. We can also add a border in the regular way to make the button stand out more:

See the Pen yVBRqo by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Navigational Button+ Hover

Just like regular links we can add effects to the buttons like :hover as in this example:

See the Pen LbPggq by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Creating a Navigation Menu I

Now, we will create a navigation menu that can be utilized at the top of the page in order to organize information and direct users to the other pages of our website. You had a preview of how to create a navigation menu in the html5 lesson where we created our links using an unordered list, we will start with this again:

See the Pen Navbar1 by Stuart (@bystuart) on CodePen.

Creating a Navigation Menu II

We don’t want our navigation bar to look like a list though, so we remove the bullets and change the default block display to inline, but retain the a:

See the Pen Navbar2 by Stuart (@bystuart) on CodePen.

Creating a Navigation Menu III

To make the navigation bar stand out we give it a different background color, change the font color and remove the underline. We make the a element a block element and add some padding:

See the Pen Navbar3 by Stuart (@bystuart) on CodePen.

Creating a Navigation Menu IV

It is starting to look better but lacks any of the interactivity that shows that these will be clickable links. The obvious method is to add a hover effect:

See the Pen Navbar4 by Stuart (@bystuart) on CodePen.

Creating a Navigation Menu V

Finally, let’s even out the width of the links by giving them a fixed width and centering the text:

See the Pen Navbar5 by Stuart (@bystuart) on CodePen.