How to change button skin

Question

Hi everyone, I am trying to change the skin (form) of a button and textArea to another. Some things like a second picture.

Answer 1

You have several options for doing this:

Use a background image (works in every browser, but I personally don’t like editing it again and saving the image file for every small detail) CSS:

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

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

CSS . , , , , , ( , IE, ):

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;
}

, CSS: http://www.colorzilla.com/gradient-editor/

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/ (-, , CSS neverthenless)

• , : http://capturedsparks.com/pure-css3-buttons/

: border, background, color ..

Answer 2

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" heght="50" alt="submit" />
</button>

Answer 3

You can apply the style to the bottom or send an HTML tag, for example:

<input type="submit" class="mybotton" value="Continue" />

This way you can add a background image:

.mybotton{
    background-image: url(buttonimage.png);
}

Hello!

Answer 4

If u wants exactly the same u construction described above just use this

<input type="image" src="submitbutton.png" />