How to change hover color of text inside button

Question

I have this button element

<div class="subscription-form">
<button type="submit" class="btn btn-subscription btn-block">
    <h4>Yes! I Want This Book <i class="fas fa-angle-double-down"></i></h4>
    <p>... and the 50% Coupon Discount Code!</p>
</button>
</div>

I'd like to change the color of the texts inside when I hover over the button. I would like to use the same hover color for both h4 an p texts.

Here is my current css

.subscription-form button.btn-subscription {
    background-color: #f0b911;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-left: 15px;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;

}


.subscription-form button.btn-subscription:hover {
    background-color: #d9a70f;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}


.subscription-form button.btn-subscription h4 {
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(0,0,0, .8);
}

.subscription-form button.btn-subscription p {
    color: rgba(0,0,0, .5);
}

I have tried this solution:

.subscription-form button.btn-subscription h4:hover, .subscription-form button.btn-subscription p:hover {
    color: red;
}

but this will only work if I hover over the h4 and p tags. So I would like to apply the same color for both h4 and p when I hover over the button itself, not just the texts.

`I would like to apply the same color for both h4 and p when I hover over the button itself` . This is a correct logic. From this logic wouldn't the logical solution be `btn:hover h4 { styles }` ? which is read as ' when button is hovered add styles to it's child h4 ' . Try searching `I would like to apply the same color for both h4 and p when I hover over the button` on google. You will immediately find your answer. Please do some research before posting on SO. 99% of the time the question has been asked before — Mihai T, Nov 04 '20 at 09:03

score 2 · Accepted Answer · answered Nov 04 '20 at 09:00

You need to add css in button hover, not an element hover

.subscription-form button.btn-subscription {
    background-color: #f0b911;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-left: 15px;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}

.subscription-form button.btn-subscription:hover {
    background-color: #d9a70f;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}

.subscription-form button.btn-subscription h4 {
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(0,0,0, .8);
}

.subscription-form button.btn-subscription p {
    color: rgba(0,0,0, .5);
}
.subscription-form button.btn-subscription:hover h4, .subscription-form button.btn-subscription:hover p {
    color: red;
}

<div class="subscription-form">
<button type="submit" class="btn btn-subscription btn-block">
    <h4>Yes! I Want This Book <i class="fas fa-angle-double-down"></i></h4>
    <p>... and the 50% Coupon Discount Code!</p>
</button>
</div>

score -1 · Answer 2 · answered Nov 04 '20 at 09:08

-1

You will have to delete the colors of the h4 & p in order to make this work.

Then add color: red; to ".subscription-form button.btn-subscription:hover" and it should do what you asked for.

I changed your example to make it work (jsfiddle)

answered Nov 04 '20 at 09:08

Alexander S.

60
8

How to change hover color of text inside button

2 Answers2