wie man die Haut eines Knopfes ändert

Question

Hallo alles, was ich versuche, die Haut (Form) der Schaltfläche und textArea Haut zu ändern. Etwas wie das zweite Bild.

Answer 1

Sie haben mehr als eine Möglichkeit, dies zu tun:

ein Hintergrundbild (Arbeiten in jedem Browser, aber ich persönlich nicht, wie es zu bearbeiten wieder und die Bilddatei für jeden kleinen speichern Detail wieder) CSS:

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

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

Alternativ können Sie die aktuellen CSS-Eigenschaften verwenden, um Schaltflächen zu erstellen. Sie bieten alles, was Sie wollen, und es ist viel kühler als Hintergrundbilder verwenden, aber der Nachteil ist, nicht viele Browser unterstützen dies voll heute (und einige werden nicht für eine lange Zeit, ja IE, ich meine, Sie):

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

Schau mal CSS Gradients zu erstellen: http://www.colorzilla.com/gradient-editor/

Eindrücke und Tutorials von dem, was möglich ist, unter Verwendung von reinem 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 deutscher Sprache, aber hey, können Sie sein, um die Tasten zu sehen und die CSS neverthenless lesen)

• Einfachere Beispiel könnte nur sein, was Sie brauchen: http://capturedsparks.com/pure-css3-buttons/

Sie können sie gleichen Eigenschaften verwenden, um einen Textbereich Styling: border, background, color für Schriftfarbe usw.

Answer 2

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

Answer 3

Sie können einen Stil auf den Boden anwenden oder HTML-Tag einreichen, wie:

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

Auf diese Weise können Sie ein Hintergrundbild hinzufügen:

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

Grüße!

Answer 4

wenn u wollen genau das gleiche Design u oben beschrieben dann gerade diese

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