How to dynamically change the CSS attribute value of a button through JavaScript

The effect to be achieved is:
The buttons are transparent normally without borders;
The button changes to a background color and a border after moving the mouse;
The comparison is as follows:
 
Figure 1 normal display
 
Figure 2 when you move the cursor over the button
The HTML code for these buttons is as follows:

 

1 < Input Runat = Server ID = Changestate Type = Button Value = "Show add curve" Class = Curvebutton Onmouseover = "Buttonmouseover ('changestate ')" Onmouseleave = "Buttonmouseleave ('changestate ')" Onserverclick = "Changestate_click"   />
2 < Input Type = "Hidden" ID = "Hideinfo" Runat = "Server" Value = "Hide"   />
3 < Input Runat = Server ID = Privewbutton Type = Button Value = "Previous period" Class = Curvebutton Onmouseover = "Buttonmouseover ('primarywbutton ')" Onmouseleave = "Buttonmouseleave ('primarywbutton ')" Onserverclick = "Changestate_click"   />
4 < Input Runat = Server ID = Currentbutton Type = Button Value = "Current time period" Class = Curvebutton Onmouseover = "Buttonmouseover ('currentclick ')" Onmouseleave = "Buttonmouseleave ('currentclick ')" Onserverclick = "Changestate_click"   />
5 < Input Runat = Server ID = Nextbutton Type = Button Value = "Next time period" Class = Curvebutton Onmouseover = "Buttonmouseover ('nextutton ')" Onmouseleave = "Buttonmouseleave ('nextutton ')" Onserverclick = "Changestate_click"   />
6 < Input Runat = Server ID = Refleshcurvebutton Type = Button Value = "Update curve" Class = Curvebutton Onmouseover = "Buttonmouseover ('refleshcurvebutton ')" Onmouseleave = "Buttonmouseleave ('refleshcurvebutton ')" Onserverclick = "Changestate_click"   />
7 < Input Runat = Server ID = Viewdatabutton Type = Button Value = "View data" Class = Curvebutton Onmouseover = "Buttonmouseover ('viewdatabutton ')" Onmouseleave = "Buttonmouseleave ('viewdatabutton ')" Onserverclick = "Changestate_click"   />
8 < Input Runat = Server ID = Privewpagebutton Type = Button Value = "Previous Page" Disabled = Disabled Class = Curvebutton Onmouseover = "Buttonmouseover ('privewpagebutton ')" Onmouseleave = "Buttonmouseleave ('primarywpagebutton ')" Onserverclick = "Changestate_click"   />
9 < Input Runat = Server ID = Nextpagebutton Type = Button Value = "Next page" Disabled = Disabled Class = Curvebutton Onmouseover = "Buttonmouseover ('nextpagebutton ')" Onmouseleave = "Buttonmouseleave ('nextpagebutton ')" Onserverclick = "Changestate_click"   />
10

The two JavaScript Functions usedCodeAs follows:

 

1 < Script Language = Javascript >
2 Function Buttonmouseover (source)
3 {
4 Try   {
5 Document. All (Source). style. backgroundcolor = " # F1f1f1 " ;
6 Document. All (Source). style. Border = " Solid 1px # cccccc " ;
7 }
8 Catch (E) {Alert (e )}
9 }
10 Function Buttonmouseleave (source)
11 {
12 Try   {
13 Document. All (Source). style. backgroundcolor = " Transparent " ;
14 Document. All (Source). style. Border = " Solid 0px # cccccc " ;
15 }
16 Catch (E) {Alert (e )}
17 }
18 </ Script >

The settings of CSS class curvebutton are as follows:

. Curvebutton {} { Background-color : Transparent ; Border-style : None ; Width : 100% ; Cursor : Pointer ; Text-align : Left ; Padding-left : 30px }

This is basically true.