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 из формы.
Цвета ясное дело подставляете свои ;)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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