Help with changing buttons

HTML & CSS
1

I’d like to improve the looks of some buttons on a web page.
I believe the code with the current buttons is this:

document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">
&nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');

Someone suggested:
"I would leave the existing buttons and add background images via CSS. Something like this:

style="background: url('/your_button_image.png') no-repeat"

However, I don’t know how to integrate this with the existing code.

Any additional help will be appreciated.

2

You don’t integrate CSS with JavaScript. They go in completely separate files. The CSS is attached into the page using a <link> tag agd the JavaScript is attached to the page using a <script> tag.

3

Thanks for your reply.
Maybe using the word ‘integrate’ is incorrect. I’m looking for help upgrading the existing buttons that appear within the current javascript code:


<script language="javascript" type="text/javascript">
<!--document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">&nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');//--></script>

Any additional guidance with this will be appreciated.

4

The point is, you can style buttons any way you like. In your stye sheet—

input[type="button"] {
    padding: 20px;
    border: none;
    color: #FFF;
    background: #F00;
    font-size: 2em;
    border-radius: 10px;
}
5

The concern is that, javascript isn’t essentially required for the changing buttons, you can prefer css instead like in following example:
http://jsfiddle.net/isdixit/svtD9/