Of course, this html code may be enhanced.
(although, the finished appearance is nearly exact)
Similar example/ same colors
<a href="http://www.bing.com/" Onclick="window.open(this.href); return false" onmouseout="this.style.color = '#383838';" onmouseover="this.style.color = '#248fb2';" align="justify" A title="outer text here">Similar example/ same colors</a>

this HTMLXD method can be applied to many different links.
(placed within Tables, Lists, Frames, and; of course....CSS Buttons)
here's my original CSS Test button
Test button
<a href="http://www.bing.com/" target="_blank" class="C2C" >Test button</a>

now, let's enhance this Test Button with HTMLXD.
(after doing so; it will probably take a few tries before acquiring a suitable color scheme)
Test button (using the XD/onmouseover feature)

<a href="http://www.bing.com/" target="_blank" class="C2C" onmouseout="this.style.color = '#383838';" onmouseover="this.style.color = '#248fb2';">Test button (using the XD/onmouseover feature)</a>

This first-attempt doesn't look good, so we'll change the color of onmouseover.
(Now, the Text becomes black when highlighted)
Test button with Black #000000 onmouseover feature

<a href="http://www.bing.com/" target="_blank" class="C2C" onmouseout="this.style.color = '#383838';" onmouseover="this.style.color = '#000000';">Test button with Black #000000 onmouseover feature</a>

In this next case below, I'm using the exact same onmouseout/onmouseover color schemes within the Button.
(word for word. all letters/numbers are identical
But, now using a different CSS code.
The highlighted background is an improvement.
a Revised Test Button

<a href="http://www." target="_blank" class="bigA" onmouseout="this.style.color = '#383838';" onmouseover="this.style.color = '#000000';">a Revised Test Button</a>

Notice: the button is now named class="bigA"
(the previous button was named C2C)
Please refer to bottom-of-page for complete CSS codes.

Finally; In order to fully utilize this htmlXD feature,
let's make the highlighted text become white, against a dark blue background.
(this will also be using a completely different CSS Code,
which uses background-color: #365682; color when hilighted.
and, this button is named dn (aka: class="dn")

Enhanced CSS
<a href="http://www." class="dn" Onclick="window.open(this.href); return false" onmouseout="this.style.color = '#2c2c2c';" onmouseover="this.style.color = 'white';" align="justify">Enhanced CSS</a>

If a font face is added, we may then alter the size of each button.

(using size="4")

Font Face 4

using (using size="1")

Font Face 1

and, these 2 buttons would appear as follows:
<a href="http://www.bing.com/" class="dn" Onclick="window.open(this.href); return false" onmouseout="this.style.color = '#2c2c2c';" onmouseover="this.style.color = 'white';" align="justify" A title="Outer Text Here"><font face="Arial" size="4" >Font Face 4</font></a> <a href="http://www.bing.com/" class="dn" Onclick="window.open(this.href); return false" onmouseout="this.style.color = '#2c2c2c';" onmouseover="this.style.color = 'white';" align="justify" A title="This text appears when mouse is dragged over button"><font face="Arial" size="1" >Font Face 1</font></a>

...needless to say: whenever enormous changes are made (such as size="6")
it also might be necessary to alter the CSS code (font-size:14px; padding:5px 8px; etc.)