web-dev-qa-db-fra.com

Changer la couleur de fond de la balise du bouton HTML avec css?

J'utilise la balise HTML button pour mes boutons d'envoi, ainsi que des boutons qui dirigent directement vers d'autres pages et fonctionnalités. J'aimerais pouvoir utiliser des boutons avec des arrière-plans différents (un bleu, un gris, un rouge, un vert, etc.), mais n'arrive pas à le faire fonctionner en ajoutant simplement une classe à la balise button.

Voici ce que j'ai jusqu'à présentHTML

<button class="green_btn" type="submit" name="cnp">News Control</button>

CSS

button {
    margin: 0 auto 5px auto;
    display: block;
    width: 134px;
    height: 35px;
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
    border: 0 none;
    font-weight: bold;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.grey_btn button {
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button  {
    background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
    background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
    background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
    background: url('../images/red_btn_bg.png') no-repeat left;
}

par défaut, je veux que le bouton soit garkgrey_btn_bg.png comme arrière-plan, mais si je veux utiliser le green_btn_bg.png comme arrière-plan, ajouter class = "green_btn" au code HTML ne fait rien.

Quelqu'un a des idées?

htmlcsshtml5css3button
4
Meta

Vous ciblez mal votre classe avec .class-name button. C'est en fait la recherche d'un élément avec un bouton enfant.

Voici...

button.grey_btn {
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn  {
    background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
    background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
    background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
    background: url('../images/red_btn_bg.png') no-repeat left;
}
3
Seth

Pour tous ceux qui se retrouvent ici qui, comme moi, ne savent pas exactement comment changer la couleur de fond d'un bouton ...

Au lieu de cela dans votre fichier CSS:

#footer_join_button {
  background-color: $light_green; 
}

... ou même:

#footer_join_button {
  color: $light_green; 
}

... l'attribut/la propriété à cibler est simplement background:

#footer_join_button {
  background: $light_green; 
}

Remarque: J'utilise SASS precompiler, d'où la variable $light_green potentiellement étrange ci-dessus.

1
mecampbellsoup

Vos classes recherchent un bouton inside un élément avec une classe de couleur. Par exemple:

.red_btn button

... cherche un bouton dans un élément parent avec la classe red_btn. Il devrait en fait être:

button.red_btn

... bien que la partie button du sélecteur soit probablement redondante sauf si vous avez d'autres éléments de types différents portant les mêmes noms de classe.

1
Utkanos