Greetings to all. There is a button, when hovering on which the text color gradually changes from black to white, but the hover of the links only works when you hover over them. Question: how to properly stylize a button so that all the text including both links work at the same time when you hover over it?

a { text-decoration: none; outline: none !important; color: #292f38; -webkit-transition: color .4s ease, background-color .4s ease; transition: color .4s ease, background-color .4s ease; } .product-prev-button a:hover { color: #fff; } .product-prev-button { position: relative; display: inline-block; margin-bottom: 10px; padding: 9px 20px 11px 40px; background-color: #e2e6e7; font-weight: 300; font-size: 14px; color: #292f38; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .17); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .17); -webkit-transition: all .4s ease; transition: all .4s ease; } .product-prev-button:hover { background-color: #330303; color: #fff; } .product-prev-button:before { color: #292f38; left: 20px; content: "\f053"; position: absolute; top: 50%; margin-top: -10px; padding: 0 2px; font-family: 'fontawesome'; font-size: 14px; -webkit-transition: color .4s ease; transition: color .4s ease; } .product-prev-button a { color: #292f38; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="product-prev-button">Назад: <a href="/catalog/picca/" rel="tag">Пицца</a>, <a href="/catalog/new/" rel="tag">Новинки</a> </div>

    2 answers 2

    Change in css

     .product-prev-button a:hover {

    on

     .product-prev-button:hover a { 

       a { text-decoration: none; outline: none !important; color: #292f38; -webkit-transition: color .4s ease, background-color .4s ease; transition: color .4s ease, background-color .4s ease; } .product-prev-button:hover a { color: #fff; } .product-prev-button { position: relative; display: inline-block; margin-bottom: 10px; padding: 9px 20px 11px 40px; background-color: #e2e6e7; font-weight: 300; font-size: 14px; color: #292f38; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .17); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .17); -webkit-transition: all .4s ease; transition: all .4s ease; } .product-prev-button:hover { background-color: #330303; color: #fff; } .product-prev-button:before { color: #292f38; left: 20px; content: "\f053"; position: absolute; top: 50%; margin-top: -10px; padding: 0 2px; font-family: 'fontawesome'; font-size: 14px; -webkit-transition: color .4s ease; transition: color .4s ease; } .product-prev-button a { color: #292f38; } 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="product-prev-button">Назад: <a href="/catalog/picca/" rel="tag">Пицца</a>, <a href="/catalog/new/" rel="tag">Новинки</a> </div>

      • your hover arrow is not highlighted and why did you additionally override the style .product-prev-button a ? - Vasya
      • You said about the text, did not say anything about the arrow. I additionally did not override anything, I took all your code and made a small change in the definition of the class - ivan K.