CSS colors for footer button

Question

Style every BUTTON in the FOOTER to have a white color

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 class="mdc-icon-button material-icons" id="btn-address">Address</button>
  <button class="mdc-icon-button material-icons" id="btn-phone">phone</button>
  <button class="mdc-icon-button material-icons" id="btn-birthday">Birthday</button>
</footer>

Please guys, i have limited hours left. helppp. i have included color:white; to my css footer class, still prompts its isnt correct. what should i please do? — Daniel Ibanga, Apr 10 '19 at 11:40
Seems like you just want nesting. Css: `footer button { color: white; }` Could you elaborate otherwise? — Amunium, Apr 10 '19 at 11:41
Please do not beg. We will answer if we understand the question — mplungjan, Apr 10 '19 at 11:41
Please update the snippet instead of posting code in a comment!!. Also include `` — mplungjan, Apr 10 '19 at 11:48
It's not clear to me what you want colored white. The button's background? The button's label? The icons inside the buttons? Can you elaborate? — Donkey Shame, Apr 10 '19 at 11:53

score 1 · Answer 1 · answered Apr 10 '19 at 11:47

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{
  color: #fff;
  background: #ff0000;
  border-radius: 5px; 
  border: 1px solid #ff0000;
  padding: 3px 10px;
}

<footer>
  <button class="mdc-icon-button material-icons" id="btn- 
          address">Address</button>
  <button class="mdc-icon-button material-icons" id="btn- 
          phone">phone</button>
  <button class="mdc-icon-button material-icons" id="btn- 
          birthday">Birthday</button>
</footer>

score 0 · Answer 2 · answered Apr 10 '19 at 11:44

0

Add this property in your style tag

footer button{
    color: #fff;
}

answered Apr 10 '19 at 11:44

Kousik

465
3
15

still hasn't worked. https://alc-dev-toolkit-d50fe.firebaseapp.com/Um1nGA4YQscSdwYHQjQB/!#playground – Daniel Ibanga Apr 10 '19 at 11:50
your whole footer tag is not parsing by the browser. You can check the inspect element feature. – Kousik Apr 10 '19 at 11:55

score 0 · Answer 3 · answered Apr 10 '19 at 11:46

0

Define a CSS Class

.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}

and include class for the Buttons inside < footer > tag

For more Info Trying Reading Styling an anchor tag to look like a submit button

answered Apr 10 '19 at 11:46

Jayakrishnan U

13
2

all of these answers are correct. but i do not know what plugin Andela uses. the buttons have all changed to white but i can't pass this present stage. – Daniel Ibanga Apr 10 '19 at 11:55

score 0 · Answer 4 · answered Apr 10 '19 at 11:47

0

footer button {
    background-color: white
}

color will define the color of the text in the button, but it sounds like you want the button itself to be white.

answered Apr 10 '19 at 11:47

MTL-VRN

393
1
14

CSS colors for footer button

4 Answers4