css change button color when hover

Question

I am trying to change the text color to black from white when the button is hover and every thing good in the code except that the text color does not change. does someone know how do I make it work?

.main__btn {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0);
  padding: 15px 50px;
  border-radius: none;
  border-color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover {
  color: #000;
}

.main__btn:hover:after {
  width: 100%;
}

<button class="main__btn" id="button1"><a href="#">button1</a></button>

Does this answer your question? [How can I change a button's color on hover?](https://stackoverflow.com/questions/3898781/how-can-i-change-a-buttons-color-on-hover) — 0stone0, Jul 07 '21 at 15:28
An anchor inside a button is invalid. There's no reason to do that. — isherwood, Jul 07 '21 at 15:28

Amith · Answer 1 · 2021-07-07T15:41:39.910

1

You would want to change color on anchor (a) tag, not button.

.main__btn:hover a {
  color: #000;
}

As you have set color: #fff; on anchor tag above, preventing inheritance of color of .main__btn:hover.

edited Jul 07 '21 at 15:41

answered Jul 07 '21 at 15:26

Amith

730
6
22

Spectric · Answer 2 · 2021-07-07T15:30:18.347

The anchor tag's color is white. Applying color:#000 on the parent will not change its color.

Instead, apply color:#000 to the anchor.

.main__btn {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0);
  padding: 15px 50px;
  border-radius: none;
  border-color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover a{
  color: #000;
}

.main__btn:hover:after {
  width: 100%;
}

<button class="main__btn" id="button1"><a href="#">button1</a></button>

Do take note however that having an anchor in a button is invalid HTML._{- Roy}

@Spectric The HTML is invalid. You should also mention that in your answer. — Roy, Jul 07 '21 at 15:29

css change button color when hover

2 Answers2