JS & buttons

I'm developing a new on-line questionnaire, and I have several problems concerning HTML, CSS & JS interaction. I'm trying to put up several buttons in a table row, with stylish CSS :hover pseudoclass, hence make those buttons capable of changing colour with "onclick" event. I figured out that this can ONLY be done through JavaScript, because of CSS-JS conflict.
I want to make users able to give an answer to some question by clicking on the button, and for feedback purposes, when they click on that button, it changes colour e.g. to blue (default colour: gray). If they click on the another button in the same row, that button changes colour (blue), while the other buttons switch to default gray. Currently I mannaged to write JS script that changes button colour with onmouseover and onmouseout event - similar to :hover pseudoclass in CSS, and also with onclick event. Suppose that a button is gray when mouse is out (default), green when mouse is over, and blue on click. The problem is: on button click, colour changes to blue, on mouse out colour switches to default, and while hovering, it's green. Complete madness!!!
I would like to retain that clicked-blue colour!!! How?!?

I reckon that I've confused you a bit, but what I want to do is quite simple: write a JavaScript function(s) that make(s) buttons gray by default (mouseover), green while hovering, and blue on click. If a user clicks another button, it becomes blue, the others switch to default (gray), and green hover colour remains while moving mouse over the buttons.

In order to present you the problem(s) I'm struggling with, I'll post HTML, CSS and JavaScript codes, respectively. Here goes:

CSS code:

JavaScript code:

 

since you know about css and pseudo classes - your best bet is to keep it semantic

define 3 classes such as .buttonHover, .button and .buttonClicked with the appropriate stylings.

remove inline javascript (things like onClick="" on the elements), thats a _bad_ practice anyway and can create some memory leaks.

setup a function on the onload like so, i have not tested this but it ought to be close enough to what's needed.

// pick a button, attach events, on click, remove all events and change class.
window.onload = function() {
    var button21 = document.getElementById("button21");

    button21.onmouseover = function() {
        this.className = "buttonHover";
    };
    // this belongs in CSS although :hover is not supported on non-A elements in IE
    button21.onmouseout = function() {
        this.className = "button";
    };
    
    button21.onclick = function() {
        this.className = "buttonClicked";
        // remove the events as the button has served its purpose
        this.onmouseover = this.onmouseout = this.onclick = null; 
    };
};

PHP:

i hope this gives you enough to work with - incidentally, i'd consider using a framework, it can apply all events based upon psuedo selectors like $("input[type=button]") etc.