Я изучаю HTML и CSS всего месяц, поэтому мой вопрос довольно простой.

Мне нужно сделать белую кнопку с серым контуром, а для значка в исходном состоянии установлено значение 0,3. При наведении курсора на кнопку значок становится черным, но без изменения прозрачности кнопки.

Я пробовал две альтернативы, меняя цифры и изменяя прозрачность, но я получаю только активную область значка, а не всю область кнопки.

Bachmaniac

Ответов: 1

Ответы (1)

Если я правильно понимаю, то, что вы пытаетесь сделать, может быть сделано только тогда, когда у вас есть полный контроль над всем изображением. Это означает, что это не может быть изображение, а только веб-значок или изображение svg. Таким образом, вы можете контролировать цвета. Я предлагаю использовать библиотеку font awesome. Я демонстрирую разницу, используя здесь обе концепции (изображение и значок):


CSS

.container{
  width:200px;
  text-align:center;
  padding:10px;
}

.button_facebook img{
  width:36px;
  opacity:0.3;
}

.facebook-icon{
  color: #000;
  background:#fff;
  border: 1px solid #888;
  padding: 8px 10px 6px;
  border-radius:50px;
  opacity:0.3;
}

.button_facebook:hover .facebook-icon{
  background:#000;
  color: #fff;
  opacity:1;
}

.button_facebook:hover img{
  opacity:1;
}

Вот ссылка на DEMO

Дайте мне знать, если я неправильно понял.

2022 WebDevInsider