comment changer la peau d'un bouton

Question

Bonjour à tous j'essaie de changer la peau (forme) de la peau de bouton et textArea à un autre. Quelque chose comme la deuxième image.

Answer 1

Vous avez plus d'une possibilité de le faire:

utiliser une image d'arrière-plan (travaux dans tous les navigateurs, mais personnellement, je ne l'aime pas à ré-éditer et enregistrer le fichier image pour chaque petit détail encore) CSS:

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

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

vous pouvez également utiliser les nouvelles propriétés CSS pour créer des boutons. Ils offrent tout ce que vous voulez et il est bien plus cool que d'utiliser des images d'arrière-plan, mais l'inconvénient est pas beaucoup de navigateurs prennent en charge ce bien aujourd'hui (et certains ne seront pas longtemps, ouais IE, je vous dire):

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

Regardez ici pour créer CSS Dégradés: http://www.colorzilla.com/gradient-editor/

Impressions et des tutoriels de ce qui est possible en utilisant CSS3 pur:

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

• http://www.kulturbanause.de/2010/05/css3-als-photoshop-ersatz-buttons-und-grafiken/ (en allemand, mais bon, vous serez en mesure de voir les boutons et lire le CSS neverthenless)

• exemple Simpler, pourrait être juste ce dont vous avez besoin : http://capturedsparks.com/pure-css3-buttons/

Vous pouvez les utiliser les mêmes propriétés pour le style un textarea: border, background, color pour la couleur de la police, etc.

Answer 2

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

Answer 3

Vous pouvez appliquer un style au fond ou soumettre balise HTML, comme:

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

De cette façon, vous pouvez ajouter une image de fond:

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

Cordialement!

Answer 4

si tu veux exactement le même design u décrit ci-dessus il suffit d'utiliser cette

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