<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>a element button</title>
<style id="button" type="text/css">
a.button, span.button, #button, #class { display:inline-block; }
.button a, a.button { text-decoration:none; }
a.button span, span.button a { display:block; }
a.button span, span.button a, a#button, a#class {
font-size:80%;
font-weight:bold;
padding:0.2em 0.5em;
cursor:default;
border:solid 1px gray;
background-color:#ccc;
color:gray;
}
a.button span:hover, span.button a:hover, a#button:hover, a.button:hover {
border-color:#444;
background-color:white;
color:black;
}
</style>
<style type="text/css">
body { font-family:arial,sans-serif; }
h1 { font-size:100%; }
ul li { margin-bottom:1px; }
</style>
</head>
<body>
<h1>a element button</h1>
<ul>
<li><span class="button"><a onclick="this.parentNode.parentNode.innerHTML+='!';">span.button>a</a></span></li>
<li><a class="button" onclick="this.parentNode.innerHTML+='!';"><span>a.button>span</span></a></li>
<li><a class="button" id="button" onclick="this.parentNode.innerHTML+='!';">a#button</a></li>
<li><a class="button" id="class" onclick="this.parentNode.innerHTML+='!';">a.button</a></li>
</ul>
</body>
</html>
