Bouton background-color avec Bootstrap 2
Bonjour,
J'ai fait une petite application web en m'appuyant sur bootstrap pour un design rapide.
Je souhaite que les boutons submits de mes formulaires soient vert, et vert claire lorsque la souris passe dessus.
IE 8 et 9 font ce que je demande. IE 10 et Mozilla affiche un bouton bleu bootstrap. Lorsque je passe ma souris dessus la moitié basse du bouton devient vert claire, l'autre moitié rester bleu.
J'utilise bootstrap 2.3.1
J'ai un fichier css à part pour modifier ce que je souhaite.
Que je modifie backgroud color dans bootstrap.css ou dans mon fichier perso.css le résultat est identique bien que je le force à recharger le css de la page avec ctrl + F5.
Mon bouton :
Code:
<p class="btn-submit"><input class="btn btn-primary btn-block" type="submit" name="Submit" value="Submit"/></p>
j'utilise la classe btn-submit que j'ai créé pour forcer la taille de mon bouton.
Dans bootstrap je trouve :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: green;
*background-color: green;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
} |
Et voilà dans le cas hover :
Code:
1
2
3
4
5
6
7
8
9
10
| .btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: limegreen;
*background-color: limegreen;
} |
