There is a task for this button: enter image description here do this hover effect: enter image description here those. in fact, just changing the background and text. Because the button must perform some function, then it really is a button, the picture of the letter is a picture attached to it, and the inscription is made using the label tag. Code for clarity:

<form action=''> <button id='feedback-mail' type='submit'> <img src='img/conatcts-feedback-mail-img.png'> </button> <label for='feedback-mail'>обратная связь</label> </form>

Since the label is not part of a button, I cannot apply the desired color to it. Please tell me how it is done correctly. Thank you.

    3 answers 3

     button{ width: 50px; height: 50px; background: #fff; border-radius: 50%; border:1px solid grey; trransition: all .3s ease-in-out; } button:hover{ background: darkgrey; } button:hover + label{ color:red; } 
     <form action=''> <button id='feedback-mail' type='submit'> <img src='img/conatcts-feedback-mail-img.png'> </button> <label for='feedback-mail'>обратная связь</label> </form>

    An example of how to do it: http://codepen.io/geek_of_cola/pen/ZpxZVw Classes add your own and parameters

    • Thank you. Very simple solution, but solved a lot of my problems) - Alexander Sigida

    there is easier:

     label { opacity: 0.5; } label:hover { opacity: 1; } 
     <form action=''> <label for='feedback-mail'> <button id='feedback-mail' type='submit'> <img src='https://cdn1.iconfinder.com/data/icons/emails-2/100/Mail-Link-512.png' style="width:35px" /> </button> <span> обратная связь</span> </label> </form>

    • interesting decision, thank - Alexander Sigida

    Add a label id to the element (for example id = "label").
    Use the following CSS for the button:

     #feedback-mail{ background-color:silver; outline:none; border:none; border-radius:360px; //при условии, что кнопка имеет форму квадрата, картинка получится круглой. } #feedback-mail:hover{ background-color:black; }

    And the following CSS for the label:

     #label{ color:silver; } #label:hover{ color:black; }

    And by the way, you can also determine the identifier for the form and access the label from the form.
    Colors of course you substitute your;)