Changing the look of form buttons

Question

With this little bit of CSS, my form buttons now look flattened (2D) and I quite like the look:

input {
  border: 1px solid #999;
}

However, for file fields (select file to upload), the button is still 3D. And then the border goes all around that button and the text next to it.

I tried fixing this problem by renaming input to .input, and then only applying it to my Submit/Cancel buttons, but now they look like how the file field looks. So how do I fix this so they all look flattened/2D?

Also, is there a way to create these form buttons as normal links? I quite like how they look. I'm programming in Rails so it would be nice if you could post the helper function for that if it's available.

Answer 1

This article explains nice tricks to style the file input button

Answer 2

To create the submit button as a normal text link you could attach an onclick events with Javascript instead to a single word instead of using the submit button.

Answer 3

http://extjs.com/forum/showthread.php?t=29032
This thread uses the ExtJS library to create an input button that can be styled. I wouldn't necessarily use ExtJS for this one reason alone, but if you really want to get fancy look at the code for his file button. Instead of positioning the file button on top of your image and tweaking it till it works nicely, this piece of Javascript actually centers the button wherever your mouse is. Allowing you to create extremely fancy looking buttons of all shapes and sizes.