how to change the skin of a button

Question

Hello all I'm trying to change the skin (shape) of the button and textArea skin to another one. Some thing like the second picture .

Answer 1

You've got more than one possibility to do this:

Use a Background image (works in every browser, but I personally don't like it to re-edit and save the image file for every small detail again) CSS:

button {
  background: url('some image..');
  width: <width of the background image>;
  height: <height of the background image>;
  ...
}

button:hover {
  background: url('mouseover image');
  ...
}

Alternatively you can use the newer CSS properties to create buttons. They offer everything you want and it is WAY cooler than using background images, but the downside is not many browsers support this fully today (and some will not for a long time, yeah IE, I mean you):

button {
  border: solid 1px somecolor;
  color: #eee;
  border-radius:5px;
 -moz-border-radius:5px;
  background: -moz-linear-gradient(top, #5E5E5E 0%, #474747 51%, #0a0e0a 51%, #0a0809 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5E5E5E), color-stop(51%,#474747), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
}
button:hover {
  color: white;
}

Look here to create CSS Gradients: http://www.colorzilla.com/gradient-editor/

Impressions and tutorials of what's possible using pure CSS3:

• http://technology.posterous.com/make-css3-buttons-that-are-extremely-fancy

• http://www.kulturbanause.de/2010/05/css3-als-photoshop-ersatz-buttons-und-grafiken/ (in German, but hey, you'll be able to see the buttons and read the CSS neverthenless)

• Simpler example, might be just what you need: http://capturedsparks.com/pure-css3-buttons/

You can use them same properties for styling a textarea: border, background, color for font color, etc.