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>
Related examples in the same category