Navigation Buttons:
Image Buttons, CSS Buttons, Hotspots, Spry Nav

By Floyd Jay Winters 03/01/2011, last update 07/21/2023
Pure CSS Nav Buttons - no images used, so quicker to load than using images, easier to modify
Alternative and simple Dropdown Navigation using <select> and <option> tags
Hotspots - Images - create custom images that allow you to click on areas that become links
HTML Button Generator - one of many easy and great css nav button makers

Pure CSS Navigation Buttons

Put the code below in the <head>
<style type="text/css">
nav {width:300px; border-top: 3px solid #31588A; border-bottom: 3px solid #31588A; background-color: #CCEAFF; text-align:center; margin:auto;}

nav ul {margin:auto; padding:0px; line-height:52px; white-space:nowrap;}

nav li {list-style-type:none; display:inline;}

nav a {border:6px outset #CCEAFF; color:#003366; background-color: #65A7ED; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; margin:1px; padding:4px 20px;}

nav a:hover {border:6px outset #CCEAFF; color:#C7EAFB; background-color: #003366;}
</style>

Put the code below in the <body>
<nav>
  <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="resume.htm">Resume</a></li>
  </ul>
</nav>

Pure CSS buttons are much quicker to load than images, and they allow the Web programmer to very quickly add or delete or modify existing Navigation buttons.
The buttons below are pure CSS using the code shown above.
Note: They may look different in different browsers; so be sure to test.

Alternative simple Dropdown Navigation using <select> and <option> tags

<form name="Drop">
  <select style="color:#069" name="menu" onChange="window.open(document.Drop.menu.options [document.Drop.menu.selectedIndex].value);">
    <option value="https://scf.edu">SCF</option>
    <option value="https://msn.com">MSN</option>
    <option value="https://ibm.com">IBM</option>
  </select>
</form>

<select onchange="if(selectedIndex != 0) location = options[selectedIndex].value;">
     <option value="">-- Select One --</option>
     <option value="http://scf.edu">SCF</option>
     <option value="http://msn.com">MSN</option>
     <option value="http://ibm.com">IBM</option>
</select>

Hotspots - Images

A Hotspot is an area on an image that a user can click on to launch a hyperlink.
Hotspots work with an Image Maps to map the x y coordinates on an image that become the hotspot.

    Expression Web: Insert a picture.
  • Select the picture > View > Toolbars > Pictures >
  • Click on Rectangular or Circle or Poly icon on the right on the toolbar and draw the desired shape over the part of the picture that you want to be a Hotspot, and enter the URL of for the Hotspot link in the Address textbox.
    Dreamweaver: Insert a picture.
  • Select the picture
  • Make sure the Properties panel is displayed on the bottom of the Dreamweaver screen.
  • Click on Rectangular or Circle or Poly tool on the left on the Properties panel and draw the desired shape over the part of the picture that you want to be a Hotspot, and enter the URL of for the Hotspot link in the Target textbox.