0
votes

Existe-t-il un moyen de styliser le bouton de pied de page blanc

On me demande de définir le style du bouton de pied de page en blanc, mais je ne sais pas si ce que je fais est incorrect ou s'il y a un problème avec le code.

J'ai essayé de coder le bouton seul mais il semble que ce ne soit ni correct

<div>
  <h2>abdurrahman abdulwahab</h2>
  <div class ="user-photo mdc-elevation--z3">
    <img src="https://via.placeholder.com/150x150">        
  </div>
  <div class="details mdc-elevation--z3">language</div>
  <div class="messages"></div>
</div>

<footer>
  <button class="btn-address mdc-icon-button material-icons">contact_support</button>
  <button class="btn-phone mdc-icon-button material-icons">perm_phone_msg</button>
  <button class="btn-birthdate mdc-icon-button material-icons">calendar_today</button>
</footer>

footer {
    width: calc(100% - 2em);
    z-index: 500;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin: 0 1em;
  }

  footer button.mdc-icon-button {
    margin: 0.5em;
    color: white;        
  }

</style>

J'espère savoir comment stylisez le pied de page de manière à ne rendre que le bouton de couleur blanche et ne pas inclure de div au-dessus du pied de page.

css margin

1 commentaires

vous voulez que la couleur d'arrière-plan des boutons de pied de page soit blanche ou couleur de texte?

3 Réponses :

0
votes

Je suppose que vous essayez de définir l'arrière-plan sur blanc et non sur la couleur du texte, comme c'est le cas actuellement.

Si vous essayez de définir l'arrière-plan sur blanc, vous devez définir background: white; comme couleur définit la couleur du texte.

Gardez à l'esprit que vous devrez soit supprimer couleur , soit mettre à jour la valeur avec autre chose que "blanc".

3 commentaires

Ce que j'ai découvert dans le résultat, c'est que le DIV au-dessus du pied de page est affecté par la couleur blanche que j'aimerais séparer du pied de page

Faites-vous référence à la couleur d'arrière-plan?

La couleur de fond par défaut est le blanc. Sauf si vous avez spécifié une couleur d'arrière-plan sur le

, il sera blanc. Mais il héritera de sa couleur d'arrière-plan d'une balise / classe / id HTML parent si cela a été défini.

0
votes

Par expérience personnelle, vous pouvez styliser le bouton en ligne en utilisant la route style = "attribute". Cependant, il est préférable d'essayer de conserver le style dans le CSS. Dans votre HTML, ajoutez la classe "button", et dans votre style css, utilisez l'attribut css "background-color: #FFFFFF".

Cela devrait ressembler à ceci:

<style>
.button {
  background-color: #FFFFFF;
  color: black;
}
</style>

0 commentaires

0
votes

Voici le code CSS qui n'affecte que les styles de bouton à l'intérieur du pied de page:

<style>    
    footer button {
      background-color: #fff;
      color: #000;
    }
</style>

En supposant que vous voulez que les couleurs de police de votre bouton soient noires.

0 commentaires