Using Links with Background Images : Anchor : Basic Tags HTML CSS TUTORIALS

HTML CSS TUTORIALS » Basic Tags » Anchor »

Using Links with Background Images


 

<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style type="text/css">
a {
      color: black;
      font: 12px Arial,Helvetica,sans-serif;
      text-decoration: none;
      display: block;
      width: 200px;
      height: 22px;
      padding-top:8px;
      text-align:center;
      background-image: url('btnOn.gif');
}

a:hover {
      background-image:url('btnOff.gif');
      font-weight: bold;
}
    </style>
    <title>Using Links with Background Images</title>
  </head>
  <body>
    <p>
      Options:
      <a href="home.html">Home</a><br />
      <a href="news.html">News</a><br />
      <a href="menu.html">Menu</a><br />
      <a href="locations.html">Locations</a>
    </p>
  </body>
</html>