Openlayers: How to add customized buttons to a panel?

Hi there i have following code :

vlayer = new OpenLayers.Layer.Vector("Overlay");
map.addLayer(vlayer);
var panel = new OpenLayers.Control.Panel({
    createControlMarkup: function (control) {
        var button = document.createElement('button'),
            iconSpan = document.createElement('span'),
            textSpan = document.createElement('span');
        button.setAttribute("class", "controlButtons");
        iconSpan.innerHTML = ' ';
        button.appendChild(iconSpan);
        if (control.text) {
            textSpan.innerHTML = control.text;
        }
        button.appendChild(textSpan);
        return button;
    }
});

and i am trying call a seperate functions on clicking the button...

panel.addControls([
     button1 = new OpenLayers.Control.SelectFeature(vlayer, {
     title: 'Add the company',
     text: 'Add',
     onClick: addCom,
     }),
     button2 = new OpenLayers.Control.SelectFeature(vlayer, {
         title: "Edit the company",
         text: "Edit",
         onClick: editComp,
     }),
     button2 = new OpenLayers.Control.SelectFeature(vlayer, {
         title: "Delete the company",
         text: "Delete",
         onClick: delComp,
     })]);

     map.addControl(panel);

the buttons are displaying but for some reason they are responding to click.....Please help me to sole this ...Thank YOu