Here we have a simple form that's been enhanced by a few CSS transforms that work on Webkit and Firefox. Sadly, Internet Explorer 7 and 8 won't see these, so they'll degrade gracefully to a normal form.
When a user focuses on any of the fields or the submit button, I've added a transformation that will magnify the input area, similar to a magnifying glass and ease it in or out for Webkit users. Here's the code:
-webkit-transition: all 0.1s ease-out;
This smoothes the transition from the normal state of the form to its active state. As of the Firefox 3.5 beta, the transition property isn't supported. You'll want to add this onto the main element, in this case we've added it to the input tag.
Both of these will scale both the input area and the text within it to be just a little larger than they were before the user clicked into them.
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
I've added a few more lines of code for some additional styling, such as border-radius to smooth the edges of the field elements. You can view all that information in the source of this page, but here's how to smooth the edges of an element:
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
I've also done a little work on the submit button, which is a little more complex.
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff), color-stop(0.5, #ccc));
While I've also added border-radius and a few more goodies to the submit button, the part which creates the gradient is above. It creates a color gradient that starts at the top left of the element and goes to the bottom of the element. The gradient starts with white, goes to silver halfway and then back to white at the bottom. If you wanted to adjust where the gradient goes to silver, you can change the color-stop value to something like .25 for 1/4 of the way down, or .75 for 3/4 of the way down.