when big changes are made, the colors can have an negative effect:

The Original CSS Button

<a href="http://www.bing.com/" class="darktone" title="">The Original CSS Button</a> (the CSS Code below is exactly the same.) Therefore, when using the New CSS Button Style (aka Granddaddy of CSS), the remaining code below is not affected. <style type="text/css"> .darktone { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background-color:#F4E0CC; primary color inside box -moz-border-radius:7px; increases roundness of box -webkit-border-radius:7px; border-radius:7px; border:1px solid #336699; thin line surrounds box display:inline-block; color:#2c2c2c; color of text font-family:arial; font-size:13px; font-weight:bold; padding:3px 8px; text-decoration:none; text-shadow:0px 0px 0px #ffffff; }.darktone:hover { background-color: blue; color when hilighted }.darktone:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style>

It's certainly worth mentioning:
the changes can be minor, as well.
In this case, notice how the text only becomes a little darker when highlighted.
my other button

Also notice: The new onmouseout style color #3c3c3c is the same as within the CSS Code.
check out color:#3c3c3c; color of text within the style type="text/css" code.
Or, just for laughs, change them, and see exactly what happens.
<a href="http://www.yahoo.com/" class="sutl" Onclick="window.open(this.href); return false" onmouseout="this.style.color = '#3c3c3c';" onmouseover="this.style.color = '#1c1c1c';" align="justify"><font face="Arial" size="2" A title="outer text here" >my other button</font></a> <style type="text/css"> .sutl { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background-color:#F2F7FF; primary color inside box -moz-border-radius:11px; increases roundness of box -webkit-border-radius:11px; border-radius:13px; border:1px solid #7AACCD; thin line surrounds box display:inline-block; color:#3c3c3c; color of text font-family:arial; font-size:11px; font-weight:bold; padding:2px 8px; text-decoration:none; text-shadow:1px 1px 0px #ffffff; }.sutl:hover { background-color:#CCDFEC; color when hilighted }.sutl:active { position:relative; top:1px; } /* This imageless css button was generated by CSSButtonGenerator.com */ </style>

Example 8 | Example 9 | Example 10 | Example 11 | Example 12 | Example 13 | Example 14 |