Can't Make My Button Look The Same In Different Browsers

I am not very good at web design, I created a button using CSS but I don't know how to make it look the same in different browsers. This is the button I use:

The best practice is to make an image and add your custom design to it and then insert submit as an image

<inputtype="image" name="submit" src="http://www.example.org/images/my_submit_button.png" value="click here!" />

Solution 2:

A button with rounded corners and gradient is very hard to do cross browser, when you have to take care of IE as well.

As for Firefox, just add -moz-border-radius: 40px; to make it look like on Chrome.

The Gradient support for IE is done through DX Image Transforms.

Cross Browser CSS Gradient gives an example how to achieve gradients cross browser.

Edit: However, Mihai is correct, it would be best to achieve the result through an image instead of a button, since it's looks are not engine-/browser-dependent.

Solution 3:

I would suggest using a border-radius generator like http://border-radius.com/ to set up the rounded corners, it'll give you the extra values you're missing (note the order is significant):

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;

As for making it look the same across browsers, with buttons it's a world of pain so you have two main options:

1. Let it degrade gracefully in IE7 and IE8. That is, don't worry that the corners aren't round, you'll still have a green button. In good browser it's going to look a little nicer; but people won't really care since normal users don't do side-by-side comparisons.
2. Use an image. I'd only suggest this if you are required (by clients, the boss, etc) to make things px-perfect across browsers.

Personally I try to avoid restyling form elements in the first place, because it expensive (time cost because it's hard to do) and unreliable. Leave them alone and users just don't notice them, which is fine - they're on the web to get things done :)