Creating dynamic buttons

I have assembled some code that creates buttons dynamically without the use of images:

<style type="text/css">
a.button {
  font: normal 8pt Arial, Helvetica, sans-serif;
  color: #036;
  text-decoration: none;
  background-color: #CCD6E0;
  border: solid 1px #036;
  border-top-color: #AAB;
  border-left-color: #AAB;
  float: left;
  text-align: center;
  padding: 3px 8px;
  margin-right: 8px;
}

a.button:link {
  text-decoration: none;
}

a.button:visited {
  color: #036;
}

a.button:hover {
  display: block;
  color: #346;
  background-color: #BCC6D0;
  border: solid 1px #369;
  border-bottom-color: #779;
  border-right-color: #779;
}
</style>

<a href="#" class="button">Submit</a>
<a href="#" class="button">Reset</a>

A minor disadvantage that I see with this approach is that when selecting the entire page, also the button text is selected.
Unless anyone knows of a more compelling reason not to use text on buttons?

A more disconcerting problem is that the hover styling makes the button look clicked already, whereas it is really a mouseOver.
So my other question is, whether some sample styles exist that roughly emulates the above of which the HTML looks like this:

<a href="#" onMouseup="style1" onMousedown="style2" onMouseover="style3">Submit</a>
<a href="#" onMouseup="style1" onMousedown="style2" onMouseover="style3">Reset</a>

In other words, can I use styling code in my events?

Thanks in advance.