how to change the skin of a button [closed]

It's difficult to tell what is being asked here. This qu开发者_C百科estion is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

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 .

---

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.

---

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

---

You can apply an style to the bottom or submit HTML tag, like:

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

In this way you can add a background image:

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

Regards!

---

if u want exactly the same design u described above then just use this

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