How to change hover color of text inside button [duplicate]

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top