Changement de bouton HTML de la balise de couleur d'arrière-plan avec le css?

Je suis en utilisant le bouton HTML de la balise pour mes boutons submit, ainsi que des boutons qui dirigent vers d'autres pages et fonctionnalités que j'aimerais être en mesure d'avoir des boutons de différentes origines (un bleu, un gris, un rouge, un vert, etc) mais n'arrive pas à le faire fonctionner simplement en ajoutant une classe tot il balise button.

Voici ce que j'ai à ce jour
HTML

<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 à l'garkgrey_btn_bg.png que le fond, mais si je veux utiliser le green_btn_bg.png pour le fond, en ajoutant class="green_btn" pour le html ne fait rien.

Quelqu'un a des idées?

Note: j'ai essayé de mettre la .green_btn après le bouton dans le css, n'a aucun effet.

OriginalL'auteur Meta | 2014-03-29

  1. 3

    Vous ciblez votre classe de mal avec .class-name button. Qui est actuellement à la recherche d'un élément avec un bouton enfant.

    Ici vous allez...

    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;
}
    merci, j'ai essayé de supprimer le "bouton" complètement de la classe dans le css et ça marchait aussi. Je vais utiliser ta méthode et voir si cela fonctionne aussi bien (pour le garder définit comme un bouton). Merci encore!
    puu.sh/7OAd9.png fonctionne très bien, merci encore!
    Vous êtes les bienvenus, n'importe quand.

    OriginalL'auteur Seth

  2. 1

    Vos classes sont à la recherche d'un bouton à l'intérieur de un élément avec une classe de couleur. Par exemple:

    .red_btn button

    ...est à la recherche d'un bouton à l'intérieur d'un parent de l'élément avec la classe red_btn. Il faudrait, en fait:

    button.red_btn

    ...si le button partie de la sélection est sans doute redondant, sauf si vous avez d'autres éléments de types différents avec les mêmes noms de classes.

    J'avais fait de cette manière à l'origine, cependant, mon erreur était d'avoir un espace entre le bouton et .red_btn, la rupture de l'ensemble de la chose, lol. Merci pour l'info!

    OriginalL'auteur Utkanos

  3. 1

    Pour quelqu'un qui se termine ici qui, comme moi, n'était pas sûr de la façon de changer un bouton de la couleur d'arrière-plan...

    Au lieu de cela dans votre fichier CSS:

    #footer_join_button {
  background-color: $light_green; 
}

    ... ou encore:

    #footer_join_button {
  color: $light_green; 
}

    ... le bon attribut/propriété de la cible est tout simplement background:

    #footer_join_button {
  background: $light_green; 
}

    Note: je suis en utilisant SASS précompilateur, donc potentiellement étrange allure $light_green variable ci-dessus.

    OriginalL'auteur mecampbellsoup