HTML CSS Bootstrap: When hovered on, icon in button does not change color?

Question

When I hover over the button, the color of the text 'Visit' changes appropriately but the Icon of Amazon does not .

One has to directly hover over the icon to change its color, but hovering anywhere over the button and then the change of color of the icon is desired.

I assume it's some complication with the class .middlered , which only serves to change the color to red because the site's native color is green.

Thank you. :)

 * { text-align: center; color: rgb(50, 185, 176); font-size: 1.03em; }.middlered * { color: rgba(211, 0, 0, 0.938); } /* FOLLOWING LINE IS THE PROBLEM? */.btn:hover{ color: white; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row gallery"> <div class="column"> <div class="card border-0"> <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a> <div class="card-body"> <h5 class="card-title">SOME INFO</h5> <p class="card-text">SOME MORE INFO.</p> <?-- FOLLOWING LINE IS THE PROBLEM? --> <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a> </div> </div> </div> </div>

Answer 1

You could add this css class .icon { color: inherit; } .icon { color: inherit; } and add the class icon to the element like <i class="icon fa fa-amazon" aria-hidden="true"></i> .

 * { text-align: center; color: rgb(50, 185, 176); font-size: 1.03em; }.middlered * { color: rgba(211, 0, 0, 0.938); } /* FOLLOWING LINE IS THE PROBLEM? */.btn:hover { color: white; }.icon { color: inherit; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row gallery"> <div class="column"> <div class="card border-0"> <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a> <div class="card-body"> <h5 class="card-title">SOME INFO</h5> <p class="card-text">SOME MORE INFO.</p> <?-- FOLLOWING LINE IS THE PROBLEM? --> <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="icon fa fa-amazon" aria-hidden="true"></i></a> </div> </div> </div> </div>

Answer 2

You may add .btn:hover i after .btn:hover, for the CSS code to change the icon color to white.

 * { text-align: center; color: rgb(50, 185, 176); font-size: 1.03em; }.middlered * { color: rgba(211, 0, 0, 0.938); } /* FOLLOWING LINE IS THE PROBLEM? */.btn:hover, /* remove the space between.btn and:hover */.btn:hover i { /* Add this line to change the color of the icon as well */ color: white; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row gallery"> <div class="column"> <div class="card border-0"> <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla"></a> <div class="card-body"> <h5 class="card-title">SOME INFO</h5> <p class="card-text">SOME MORE INFO.</p> <?-- FOLLOWING LINE IS THE PROBLEM? --> <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a> </div> </div> </div> </div>