Here is what you do: you first color your button in one color and then, immediately, color it in some different color. Naturally, you can see only the latest background color.
Instead, you need to handle some events. It's very convenient to do with jQuery library. Here is a complete code sample for your, please try:
<html>
<head>
<title></title>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<style type="text/css"></style>
</head>
<body>
<button class="normal" id="myButton">Some text</button>
<script type="text/javascript">
$(document).ready(function() {
buttonElement = $("#myButton");
imageElement.hover( // accepts two functions
function() { // mouse goes over:
$(this).toggleClass("normal", false); // remove one class first
$(this).toggleClass("mouseOver", true); // add another one
},
function() { // mouse goes out
$(this).toggleClass("mouseOver", false);
$(this).toggleClass("normal", true);
}
);
}); </script>
</body>
</html>
If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[
^],
http://jquery.com/[
^],
http://learn.jquery.com/[
^],
http://learn.jquery.com/using-jquery-core/[
^],
http://learn.jquery.com/about-jquery/how-jquery-works/[
^] (start from here).
[EDIT]
If you need to, you can do it with different buttons and different colors. Actually, we had some disagreement about what you wanted, because the questions about mouse over and the question about different colors of different buttons look like different unrelated questions.
If you think that your issues are not yet addressed, please write a comment on it. I will gladly help you.
Thanks to Chris Maunder who reminded me about the last part of this question.
—SA