2

Стоит задача для вот такой кнопки:введите сюда описание изображения сделать вот такой hover эффект: введите сюда описание изображения т.е. по сути просто смена фона и текста. Т.к. кнопка должна выполнять какую-то функцию, то она действительно является кнопкой, картинка письма - это вложенная в нее картинка, а надпись сделана с помощью тега label. Код для наглядности:

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

Поскольку label не является частью button - не могу применить к нему нужный цвет. Подскажите пожалуйста как это делается правильно. Благодарю.

3 ответа 3

2

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> 

Пример как сделал: http://codepen.io/geek_of_cola/pen/ZpxZVw Классы добавишь свои и параметры

1
  • Благодарю. Очень простое решение, а решило уйму моих проблем) 9 окт 2016 в 13:42
1

есть проще:

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>

1
  • интересное решение, благодарю 9 окт 2016 в 14:11
0

Добавьте элементу label id (например id="label").
Используйте следующий CSS для кнопки:

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

И следующий CSS для label:

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

А можете кстати также определить идентификатор для формы и получать доступ к label из формы.
Цвета ясное дело подставляете свои ;)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.