Сделайте социальные иконки интерактивными

Я искал в Интернете инструкции, как сделать значки социальных сетей интерактивными, но, похоже, не нашел ответа. Мне нравится размещать в своем блоге несколько значков с такими кодами:

 .social-wrap {
          width: 325px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -25px 0 0 -162.5px;
        }
        .social-wrap button {
          border: none;
          outline: none;
          width: 50px;
          height: 50px;
          font-size: 1.25em;
          transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
          box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap button:hover {
          cursor: pointer;
          border-radius: 50px;
          box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap .facebook {
          color: #3b5998;
          background-color: #fff;
        }
        .social-wrap .facebook:hover {
          color: #fff;
          background-color: #3b5998;
        }
        .social-wrap .facebook:active {
          background-color: #fff;
          color: #3b5998;
        }
        .social-wrap .twitter {
          color: #00aced;
          background-color: #fff;
        }
        .social-wrap .twitter:hover {
          color: #fff;
          background-color: #00aced;
        }
        .social-wrap .twitter:active {
          background-color: #fff;
          color: #00aced;
        }
        .social-wrap .google-plus {
          color: #dd4b39;
          background-color: #fff;
        }
        .social-wrap .google-plus:hover {
          color: #fff;
          background-color: #dd4b39;
        }
        .social-wrap .google-plus:active {
          background-color: #fff;
          color: #dd4b39;
        }

  <div class='social-wrap'>
    <button class='facebook'>
      <i class='fa fa-facebook'></i>
    </button>
    <button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button>
    <button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button>
 </div>

How can I make it clickable? I tried inserting button tags but it gives me some error " Illegal nesting: nesting within plain text is illegal.". Please give me some idea how to do it. TIA

Нужно добавить больше кода. И вам не хватает "{}"

— 03.08.2018 05:06

Привет, Запп, ты имеешь в виду код CSS?

— 03.08.2018 05:16

Да. Добавьте свой код. Кроме того, у вас отсутствуют открывающая и закрывающая скобки {}

— 03.08.2018 05:26

Привет, Запп, я добавил коды HTML и CSS ... Я не очень хорошо знаком с кодом HTML с "кнопкой%". Я знаком с основами структурирования HTML и CSS.

— 03.08.2018 05:33

javascript html

03.08.2018 05:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

259

Ответы 3

Вы должны иметь возможность просто обернуть теги <i> в теги <a> с атрибутом href, установленным на соответствующую ссылку:

<a href = "your-link-here">
    <i class='fa fa-facebook'></i>
</a>

вы даже можете заключить кнопки в теги <a>, если нужно, чтобы они также были интерактивными.

03.08.2018 06:42

Заключите их в теги привязки вместо тегов кнопок, а затем стилизуйте теги привязки, чтобы они выглядели как кнопки.

<a class = "facebook button" href = "https://facebook.com/">
  <i class='fa fa-facebook'></i>
</a>

В таблице стилей изменить

.social-wrap button в .social-wrap .button

а также

.social-wrap button:hover в .social-wrap .button:hover

(точки перед 'b' в 'кнопке')

03.08.2018 06:44

Одно простое исправление - окружить кнопку тегом привязки <a> и добавить к ней атрибут href.

.social-wrap {
  width: 325px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -162.5px;
}

.social-wrap button {
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  font-size: 1.25em;
  transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
  box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
}

.social-wrap button:hover {
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
}

.social-wrap .facebook {
  color: #3b5998;
  background-color: #fff;
}

.social-wrap .facebook:hover {
  color: #fff;
  background-color: #3b5998;
}

.social-wrap .facebook:active {
  background-color: #fff;
  color: #3b5998;
}

.social-wrap .twitter {
  color: #00aced;
  background-color: #fff;
}

.social-wrap .twitter:hover {
  color: #fff;
  background-color: #00aced;
}

.social-wrap .twitter:active {
  background-color: #fff;
  color: #00aced;
}

.social-wrap .google-plus {
  color: #dd4b39;
  background-color: #fff;
}

.social-wrap .google-plus:hover {
  color: #fff;
  background-color: #dd4b39;
}

.social-wrap .google-plus:active {
  background-color: #fff;
  color: #dd4b39;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='social-wrap'>
   <a href = "http://www.facebook.com"><button class='facebook'>
      <i class='fa fa-facebook'></i>
   </button></a>
   <a href = "http://www.twitter.com"><button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button></a>
   <a href = "http://www.google.com"><button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button></a>
</div>

03.08.2018 07:06

Другие вопросы по теме

Как загрузить загрузчик на html до тех пор, пока все изображения не будут загружены с помощью angularjs?

Почему таблицы данных используют ".row (). Remove ()" для удаления одной из строк, но несколько строк были удалены?

Как мне отрегулировать расстояние между строками, когда есть разрыв строки?

При парсинге console.info показывает данные, но не возвращается

Ошибка Scrapy при открытии селектора

Как мне стилизовать метку данных и добавить иконку?

Автоматически загружает файл php, который является URL-адресом метода jquery Ajax

Приоритет настраиваемых атрибутов HTML

Слушатель событий флажка javascript прерывается, если содержимое innerHTML изменено

Как выровнять текст в Firefox и Safari с помощью CSS?

Сделайте социальные иконки интерактивными

Ответы 3

Другие вопросы по теме

Похожие вопросы