Button, different color for text and inline element and both should be able to change color on hover

Question

I have the following button:

<button class="btn btn-outline-secondary btn-lg">
  TEXT<i class="fa fa-plus"></i>
</button>

I would like to style the buttons text and the fa-icon with a different color. Both should be able to change the color when i hover over the button. Im able to do either of them but cant get both working at the same time:

I can style them differently:

.fa.fa-plus {
  color: green;
}

.btn {
  color: WHITE
}

This makes the text white and the icon green(Thats what i want). When i hover over the button, im now only able to change the texts color:

.btn:hover {
  color: BLACK;
}

How can i change the icons color too if the button is hovered? I would like the text for example to be black and the icon to be white when the button is hovered. But im not able to achieve the latter.

Does this answer your question? [CSS :: child set to change color on parent hover, but changes also when hovered itself](https://stackoverflow.com/questions/14792574/css-child-set-to-change-color-on-parent-hover-but-changes-also-when-hovered) — AGE, Dec 27 '19 at 15:48

score 2 · Accepted Answer · answered Dec 27 '19 at 15:42

You can use a rule to both the button inner text as well as the icon as following:

.fa.fa-plus {
  color: green;
}

.btn {
  color: WHITE
}

.btn:hover .fa,
.btn:hover{
    color: red;
}

<button class="btn btn-outline-secondary btn-lg">
  TEXT<i class="fa fa-plus">+</i>
</button>

score 2 · Answer 2 · answered Dec 27 '19 at 15:45

Your code means that you want to change button text on hover.

To do what you want, you should apply styles to your icon on button hover:

.btn:hover .fa.fa-plus {
  color: RED;
}

So, in this case, you will apply styles to .fa.fa-plus, but on button hover. Hope, it makes sense to you :)

score 1 · Answer 3 · answered Dec 27 '19 at 15:44

1

Give a parent div for that button and add hover effect using that parent class

<style>
.fa.fa-plus {
  color: green;
}

.btn {
  color: WHITE
}
.hover:hover .btn, .hover:hover .fa.fa-plus{
color: BLACK;
}
</style>
<div class="hover">
<button class="btn btn-outline-secondary btn-lg">
  TEXT<i class="fa fa-plus"></i>
</button>
</div>

answered Dec 27 '19 at 15:44

Bhavana

101
4

1

why add a parent div? i think its not necessary – Sfili_81 Dec 27 '19 at 15:45

score 0 · Answer 4 · answered Dec 27 '19 at 15:43

0

The below is an example of how to change the child via the parent :hover attribute, implement it according to how you wish to color the plus icon.

.btn:hover .fa.fa-plus {
    color: red;
}

answered Dec 27 '19 at 15:43

AGE

3,752
3
38
60

score 0 · Answer 5 · answered Dec 27 '19 at 15:44

0

You can use this code to access the child element of hover:

.btn:hover . { color: BLACK; }

answered Dec 27 '19 at 15:44

M074554N

61
1
6

score 0 · Answer 6 · answered Dec 27 '19 at 16:55

0

use this in each element one-by-one on your main page,

For an example:

div.e:hover {
    background-color:red;
}

answered Dec 27 '19 at 16:55

Parth prajapati

62
2

Button, different color for text and inline element and both should be able to change color on hover

6 Answers6