changing button style when clicked

Discontinued products DHTMLX Touch
#1

The code below works (at least on Safari 5.1.4) the first time the button is clicked. However, when clicked a second time, it does not change color. Is there a better way to go about this?

.dhx_el_roundbutton input{ background: #DFDFDF; background: -webkit-gradient(linear, left top, left bottom, from( #FDFDFD ),to( #DFDFDF )); background: -moz-linear-gradient(top, #FDFDFD, #DFDFDF ); color: #6E6E6E; text-shadow:none; } .dhx_el_rejectbutton input{ background: #DFDFDF; background: -webkit-gradient(linear, left top, left bottom, from( #FF0000 ),to( #DFDFDF )); background: -moz-linear-gradient(top, #FDFDFD, #DFDFDF ); color: #6E6E6E; text-shadow:none; } 
<body>

	<script type="text/javascript" charset="utf-8">
	dhx.ui({ 
		container:"box",
			type:"clean", cols: [
					{ view:"button",id:"btnTryme", inputWidth:100, value: "Approved", css:"dhx_el_roundbutton", click: "btnTryme_Click"}
             ]
	})
	</script>

 </body>
#2

define(“css”,“dhx_el_rejectbutton”) adds the new css rule name to the className of a button. But it doesn’t redefine the existent.

Try to use two buttons and hide one of them:
function btnTryme_Click()
{
if($$(“btnTryme1”).config.hidden){
$$(“btnTryme2”).hide() ;
$$(“btnTryme1”).show();
}
else{
$$(“btnTryme1”).hide() ;
$$(“btnTryme2”).show();
}

    }

dhx.ui({
container:“box”,
type:“clean”, cols: [
{ view:“button”,id:“btnTryme1”, inputWidth:100, value: “Approved”, css:“dhx_el_roundbutton”, click: “btnTryme_Click”},
{ view:“button”,id:“btnTryme2”, inputWidth:100, value: “Rejected”, css:“dhx_el_rejectbutton”, click: “btnTryme_Click”,hidden:true}

]
})