Remplacer un bouton submit par un bouton css

Résolu/Fermé
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 - Modifié par zephir94 le 28/02/2014 à 16:17
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 - 28 févr. 2014 à 22:11
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

3 réponses

Utilisateur anonyme
28 févr. 2014 à 16:27
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
Utilisateur anonyme
28 févr. 2014 à 16:28
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
0
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
Modifié par zephir94 le 28/02/2014 à 17:38
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 ?
0
zephir94 Messages postés 26 Date d'inscription mercredi 12 février 2014 Statut Membre Dernière intervention 11 mars 2014 2
Modifié par zephir94 le 28/02/2014 à 22:12
J'ai trouvé il fallait ajouter dans la class
outline-style:none;
bonne soirée
0