有没有办法将页脚按钮设置为白色

Question

我被要求将页脚按钮设置为白色，但我不确定我所做的是不正确还是代码有问题。

我试图自己编码按钮，但它似乎也不对

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>

<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>

我希望知道如何设置页脚的样式，以便只使按钮颜色为白色而不包括页脚上方的div。

Answer 1

我假设你正在尝试将背景设置为白色而不是文本颜色，就像目前的情况一样。

如果您尝试将背景设置为白色，则需要设置background: white;，因为color设置文本颜色。

请记住，您需要删除color或将值更新为“white”以外的值。

Answer 2

根据个人经验，您可以使用style =“attribute”路线内联按钮。但是，最好尝试将样式保留在CSS中。在HTML中，添加类“按钮”，在css样式中，使用css属性“background-color：#FFFFFF”。

它应该如下所示：

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

您可以将我在此处使用的类名更改为更适合您正在编辑的内容，这样就不会与其他CSS混合使用。

Answer 3

这是CSS代码，它只影响页脚内的按钮样式：

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

假设您希望按钮的字体颜色为黑色。