Remplacer un bouton submit par un bouton css [Résolu/Fermé]

Signaler
Messages postés
26
Date d'inscription
mercredi 12 février 2014
Statut
Membre
Dernière intervention
11 mars 2014
 -
Messages postés
26
Date d'inscription
mercredi 12 février 2014
Statut
Membre
Dernière intervention
11 mars 2014
 -
Bonjour à vous tous,

je viens vers vous pour trouver un peu d'aide à fin de remplacer un bouton input html d'un formulaire.
J'ai crée un bouton en css à deux position avec un hover
voici mon code css 

button.css3button {
color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #ffffff;
background:#000000;
 }
button.css3button:hover {
color:#000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 2px solid #000000;
background:#ffffff;
}
ce que je voudrais hélas sans succès c'est l'utiliser comme input type="submit" 
<input type="submit" class="css3button" style="width: 160px;" value="envoyer">

Merci par avance

Afficher la suite

3 réponses

Réponse 1 / 3

Hello,

Là ce que tu fais avec ton CSS c'est de styliser l'élément 
button.css3Button
, donc 
<button class="css3Button">


Mais ça ne correspond pas à ton 
<input type="submit" class="css3Button"/>
.

Ce qu'il faut c'est :
- changer ton html : 
<button type="submit" class="css3Button"/>

- changer ton css : 
input[type="submit"].css3Button{ .... }
3
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Signaler
Utilisateur anonyme
Je sais pas si avec ton message tu as pu comprendre l'erreur que tu avais fait : tu appliquais un style à un button qui a la class css3Button mais il n'existe pas dans ton html.

A+ Seezer
Réponse 2 / 3
Messages postés
26
Date d'inscription
mercredi 12 février 2014
Statut
Membre
Dernière intervention
11 mars 2014
 1
J'ai trouvé, j'ai crée une class submit et submit hover, 

<input type="submit" class="submit" style="width: 160px;" value="Envoyer le formulaire">

Merci pour ta réponse seezer que je viens de découvrir en même temps.
Par contre malgré un border: none; dans une class 

a:link 
{ 
 text-decoration:none; 
border: none;
cursor: pointer;
}
a:hover 
{ 
color:black;
border: none;
cursor: pointer;
}

sous safari, Google chrome et Firefox j'ai un petit cadre bleu au click autour des mes boutons css mais pas sous ie !!!
une piste ?
Réponse 3 / 3
Messages postés
26
Date d'inscription
mercredi 12 février 2014
Statut
Membre
Dernière intervention
11 mars 2014
 1
J'ai trouvé il fallait ajouter dans la class 
outline-style:none;
bonne soirée
Posez votre question