Créer 2 boutons submit différent dans un même formulaire

[Linaewen]

Bonjour, voilà j'ai un formulaire dans lequel il y a 2 boutons submit qui ont une fonction différente.

 

Je souhaiterais que chaque bouton soit différent (ex: couleur) mais je n'y arrive pas:

 

Voici le bout de code css utilisé:

#loginForm input[type=submit]{
	cursor: pointer;
	border-radius: 4px;
	background-image: linear-gradient(to bottom, #5CB85C 0px, #449D44 100%);
        border-color: #419641;
	color: white;
	text-align: center;
	box-shadow: 0 1px 3px #555555;
	text-shadow: 0 1px 0 rgba(0, 1, 1, 0.3);
	width: 100%;
	font-weight: bold;
}
#loginForm input[type=submit]:hover{
	background-image: linear-gradient(to bottom, #89DC89 0px, #76CE76 100%);
        border-color: #74CB74;
}

le premier bouton :

<input type="submit" class="signin_submit" name="SubmitLogin" value="se connecter" />
					

<p><input type="submit" class="signin_submit" name="SubmitCreate" value="Créer mon compte" /></p>

et le second

 

Quelqu'un peut-il m'aiguiller?

 

Merci par avance.

[DevNet]

Salut,

 

C'est quoi la relation avec #loginForm ?

 

Si c'est une classe css pour vous en inspirer, alors dupliquez son contenu et nommer la ainsi :

.firstButton {
	cursor: pointer;
	border-radius: 4px;
	background-image: linear-gradient(to bottom, #5CB85C 0px, #449D44 100%);
        border-color: #419641;
	color: white;
	text-align: center;
	box-shadow: 0 1px 3px #555555;
	text-shadow: 0 1px 0 rgba(0, 1, 1, 0.3);
	width: 100%;
	font-weight: bold;
}
.firstButton:hover{
	background-image: linear-gradient(to bottom, #89DC89 0px, #76CE76 100%);
        border-color: #74CB74;
}

.secondButton {
	cursor: pointer;
	border-radius: 4px;
	background-image: linear-gradient(to bottom, #5CB85C 0px, #449D44 100%);
        border-color: #419641;
	color: white;
	text-align: center;
	box-shadow: 0 1px 3px #555555;
	text-shadow: 0 1px 0 rgba(0, 1, 1, 0.3);
	width: 100%;
	font-weight: bold;
}
.secondButton:hover{
	background-image: linear-gradient(to bottom, #89DC89 0px, #76CE76 100%);
        border-color: #74CB74;
}

Ensuite, votre code html :

<input type="submit" class="signin_submit firstButton" name="SubmitLogin" value="se connecter" />
					

<p><input type="submit" class="signin_submit secondButton" name="SubmitCreate" value="Créer mon compte" /></p>

Je sais pas si je réponds à votre demande, mais de ce que j'ai compris c'est ce que vous souhaitez faire ?

 

A+

[Linaewen]

Bonsoir, merci pour la rapidité de la réponse, ça a l'air d'être ce que je cherche (un truc tout simple alors que je cherchais plus compliqué :-D ). Je teste ça demain et je vous tiens au courant.

[Linaewen]

Bonjour, c'est bien ça, par contre j'ai "color", "width" et "font-weight", ainsi que le hover qui ne sont pas pris en compte. Avez-vous une idée d'où cela peut venir?

merci

Edited February 22, 2014 by Linaewen (see edit history)