CSS-only dynamic buttons

Here’s the code for the CSS-only buttons we created in class Monday.

First the HTML:

  <div id="navigator">
  <p class="housebutton">
  <a href="#">1stLink</a></p>
  <p class="housebutton">
  <a href="#">2ndLink</a></p>
  <p class="housebutton">
  <a href="#">3rdLink</a></p>
  <p class="housebutton">
  <a href="#">4thLink</a></p>

Then the stylesheet:

Don’t forget: The stylesheet must be referred to in the HEAD of the web page containing the buttons. For example, if the stylesheet is named buttons.css then the HEAD must contain:

<link rel="stylesheet" type="text/css" href="buttons.css">

This exercise was cribbed from The CSS Cookbook at The House of Style, a wide-ranging CSS website by Westciv Software.

Notice

Dynamic buttons