Salut,

J'aimerais créer un beau bouton pour les champs input de type submit sur mes formulaires comme celui-ci:

<input type="submit" value="Se connecter">

J'ai trouvé un tutoriel expliquant la démarche:

Tutoriel bouton formulaire

Mais dans l'exemple le code html est comme suit:

<div class="btn"><a href="#">Add to Cart</a><span></span></div>

Hors je galère pour utiliser cette technique avec un champ input au lieu d'un lien!

Voici le CSS du bouton:

body {
	margin: 0;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.btn {
	float: left;
	clear: both;
	background: url(images/btn_left.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	background: url(images/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}
.btn span {
	background: url(images/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}

Merci pour votre aide, je galère vraiment

Je comprends pas trop, pourquoi ne fais tu pas simplement ça ?

input{
   /* Le CSS de ton input */
}

Ou si tu ne veut modifier qu'un input, tu le met dans une div ou un span d'id bnt, et tu fais ce code :

#bnt input{
   /* Le CSS de ton input */
}

Je ne vois pas pourquoi tu va chercher à faire ça avec des images et des liens...

Bonjour,

Tu peux même te contenter de ça, pour ne pas avoir besoin de classes :

input[type=submit] {  }

Citation : warpShadow

Bonjour,

Tu peux même te contenter de ça, pour ne pas avoir besoin de classes :

input[type=submit] {  }

Nouvelle propriété CSS3, pas terrible, pas supporté par tous les navigateurs...

Non, c'est un sélecteur CSS2, très bien supporté par tous les navigateurs.

Bonjour,

Citation : matthieukern

Je comprends pas trop, pourquoi ne fais tu pas simplement ça ?

input
{
   /* Le CSS de ton input */
}

moi non plus je ne comprends pas pourquoi; d'autant plus, que c'est le moyen le plus simple.
Pensez a utilisez un id ou une class avec le input afin de le distinguer des autres input.

En j'ai déjà adopté votre solution en CSS mais je trouve que les boutons ne sont pas terribles, c'est pour ça que je veux utiliser des images. J'aimerais avoir des boutons de formulaire aussi jolis que sur le SDZ.

Pour l'instant mon code qui marche:

form input[type="submit"]
{
	border: #22bb44 1px solid;
	background-color: #aaffaa;
	width: 20%;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

form input[type="submit"]:hover
{
	background-color: #00ff77; 
	cursor: pointer;
}

Si j'ai bien compris l'intérêt du bouton image que je vous ai indiqué dans le lien c'est qu'il est extensible en fonction du texte donc on ne doit pas refaire un bouton dans Photoshop à chaque fois, et en plus les couleurs du bouton sont directement indiquées dans le CSS, bien pratique. Merci!

Rien ne t'empêche d'utiliser une image de fond. Par exemple sur le sdz, il s'agit d'une image répétée.

Voilà le code des boutons du Sdz :

input[type="submit"] {
    background: url("../../images/designs/2/buttoncut.png") repeat-x left -99px !important;
    border: 0 none !important;
    color: white;
    height: 23px;
    padding: 3px 10px;
}

Et tout est là : une image en background avec la propriété repeat-x. Ça permet là aussi de préciser la couleur du texte, sa taille, et autres en css.

Je me permet de modifier légèrement ton code :

input[type="submit"]
{
	border: #22bb44 1px solid;
	background: #afa;
	width: 20%;
	border-radius: 10px; 
}

input[type="submit"]:hover
{
	background: #0f7; 
	cursor: pointer;
}

• Inutile de préciser "form" avant input : Ton input est FORCÉMENT dans une balise form.
• Tu n'as pas besoin de préciser non plus "background-image", ni "background-position" ou "background-color", "background-repeat". Tu peux utiliser simplement la propriété background. Elle comprend toutes les propriétés précédentes.
• Width: je n'ai touché à rien là, mais fais très attention avec les valeurs en % : si ton design est extensible, tu risque de te retrouver avec des boutons qui font 20% de l'écran ; sur un écran 24 pouces, ça risque de faire très large. Si ce n'est pas l'effet souhaité, préfère une valeur en pixels.
• Les couleurs de background peuvent être raccourcies lorsqu'il s'agit de valeurs "répétables". Ainsi 00ff44 peut s'écrire 0f4, CSS comprendra qu'il doit doubler chaque valeur comme ceci : 00ff44. Ça marche donc avec 222222. Bref ce n'est pas obligatoire, mais c'est juste pour que tu le saches.
• Enfin, pour border-radius, n'utilise que la propriété CSS3 ; ne t'encombre pas des pseudo-propriétés -webkit- et -moz-, qui ne sont pas supportées officiellement et qui ne sont que des intégrations bancales pour les anciennes versions de chrome/safari et firefox.

Voilà

Merci beaucoup warpShadow pour tous tes conseils, ça m'a bien aidé!