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

【问题标题】：Is there a way to style footer button white有没有办法将页脚按钮设置为白色
【发布时间】：2019-04-10 17:55:46
【问题描述】：

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

我尝试自己编写按钮，但似乎也不对

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。

【问题讨论】：

您希望页脚按钮的背景颜色为白色还是文本颜色？

标签： css margin

【解决方案1】：

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

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

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

【讨论】：

我在结果中发现的是，页脚上方的 DIV 受到了我想从页脚中分离出来的白色的影响
你指的是背景色吗？
默认背景颜色为白色。除非您在<div> 上指定了背景颜色，否则它将是白色的。但如果已设置，它将从父 HTML 标记/类/id 继承其背景颜色。

【解决方案2】：

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

应该是这样的：

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

您可以将我在此处使用的类名称更改为更具体的名称，以适应您正在编辑的内容，这样它就不会与其他 CSS 融为一体。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：