Создайте анимированные кнопки социального разделения | HTML, CSS3, Font Awesome

Введение

В этом Лаборатории вы научитесь создавать анимированные кнопки социальной поделиться с помощью HTML и CSS3. Эти кнопки используют библиотеку Font Awesome для иконок и стилизуются с использованием CSS для обеспечения плавного эффекта перехода при наведении. В конце этого руководства у вас будет набор красивых, адаптивных социальных кнопок, которые вы сможете интегрировать на любом сайте.

демонстрация анимированных социальных кнопок

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-179618{{"Анимированные кнопки социального разделения с использованием CSS"}} css/text_styling -.-> lab-179618{{"Анимированные кнопки социального разделения с использованием CSS"}} css/display_property -.-> lab-179618{{"Анимированные кнопки социального разделения с использованием CSS"}} css/pseudo_classes -.-> lab-179618{{"Анимированные кнопки социального разделения с использованием CSS"}} css/pseudo_elements -.-> lab-179618{{"Анимированные кнопки социального разделения с использованием CSS"}} css/transformations -.-> lab-179618{{"Анимированные кнопки социального разделения с использованием CSS"}} end

Введение в иконки

Для использования иконок Font Awesome просто используйте префикс "fa", за которым следует имя иконки.

Специфика формата следующая: <i class="fa ICON_NAME"></i>

Для подключения необходимых иконок из библиотеки иконок напишите следующий код в файле index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animated Social Sharing Buttons</title>

    <!--Библиотека иконок-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div>
      <i class="fa fa-facebook"></i>
      <i class="fa fa-twitter"></i>
      <i class="fa fa-google"></i>
      <i class="fa fa-instagram"></i>
      <i class="fa fa-pinterest"></i>
    </div>
  </body>
</html>

Результат выглядит так:

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

Синтаксис псевдо-класса: selector:pseudo-class {property:value;}

a:hover {property:value;} задает стиль, отображаемый при наведении курсора мыши на ссылку.

Установите необходимые селекторы классов, чтобы облегчить последующее стилирование соответствующих кнопок.

<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
  <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
  <a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>

Предварительный просмотр эффекта:

Иконки Font Awesome становятся синими, потому что после применения тега <a> стандартный цвет шрифта - синий.

✨ Проверить решение и практиковаться

Настройка стиля иконок

Прежде чем настраивать стиль иконок, добавим в тег <head> файла index.html таблицу стилей style.css.

<link rel="stylesheet" href="style.css" />

Для стандартизации общего стиля зададим глобальный стиль в style.css.

/* Глобальные настройки стиля */
* {
  margin: 0;
  padding: 0;
}
a,
img {
  border: 0;
}
body {
  background: #eee;
}

Для украшения векторных иконок, предоставляемых шрифтом Font Awesome, давайте сначала зададим их цвета.

.social-btns.btn.facebook.fa {
  color: #3b5998;
}
.social-btns.btn.twitter.fa {
  color: #00aff0;
}
.social-btns.btn.google.fa {
  color: #dc4a38;
}
.social-btns.btn.instagram.fa {
  color: #bf00ff;
}
.social-btns.btn.pinterest.fa {
  color: #cc0000;
}

Предварительный просмотр эффекта:

Далее мы настроим иконку на мгновенное увеличение при касании и изменение ее цвета. Для эффекта мгновенного увеличения мы можем использовать transform: scale(0.8) для уменьшения иконки до 80% ее исходного размера, а при наступлении события касания она возвращается к исходному размеру с использованием transform: scale(1).

Введите следующий код в файл style.css:

.social-btns.btn.fa {
  /* Задаем стиль отображения по умолчанию для ссылки */
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.social-btns.btn:focus.fa, /* Выбираем стиль для фокусированной кнопки */
.social-btns.btn:hover.fa {
  /* Задаем стиль отображения для ссылки при наведении курсора */
  color: #fff; /* Меняем ее цвет */
  -webkit-transform: scale(1);
  transform: scale(1);
}
.social-btns.btn.fa {
  /* Задаем размер и вертикальное выравнивание иконок, предоставляемых Font Awesome */
  font-size: 38px;
  vertical-align: middle;
}

Предварительный просмотр эффекта:

✨ Проверить решение и практиковаться

Настройка стиля кнопок

Для макета страницы мы центрируем кнопки на странице, задаем их как элементы встроенного уровня с блочным поведением, а затем убираем их избыточность.

Атрибут display определяет тип элемента для генерации:

display:inline задает элемент встроенного типа, который занимает одну строку с другими элементами, то есть не занимает целую строку.
display:block задает элемент блочного уровня, который занимает целую строку.
display:inline-block комбинирует два предыдущих способа, чтобы создать элемент блочного уровня, который не занимает целую строку.

.social-btns {
  height: 90px;
  margin: 80px auto;
  font-size: 0;
  text-align: center; /* горизонтальное выравнивание по центру */
}
.social-btns.btn {
  display: inline-block; /* задаем кнопку как элемент блочного уровня, который не занимает целую строку */
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px; /* задаем высоту строки */
  margin: 0 10px;
  text-align: center;
  position: relative; /* задаем относительное позиционирование */
  overflow: hidden; /* скрываем содержимое, выходящее за пределы элемента */
  border-radius: 28%; /* закругляем углы DIV */
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* добавляем тень к элементу DIV */
  opacity: 0.99; /* задаем прозрачность. От 0.0 - прозрачный до 1.0 - полностью непрозрачный */
}

Предварительный просмотр эффекта:

Мы видим, что при касании кнопки иконка и фон кнопки становятся белыми, что затрудняет четкое восприятие. Поэтому нам нужно настроить стиль кнопки при касании. Во - первых, мы должны повернуть btn:before по часовой стрелке на 45° с использованием transform: rotate(45deg). Затем настроим начальную и конечную позиции btn:before.

Селектор before: Вставляет новый контент перед содержимым элемента.

.social-btns.btn:before {
  /* Задаем значения top и left перед содержимым каждого элемента btn, то есть позицию btn, когда она не нажата */
  top: 90%;
  left: -110%;
}
.social-btns.btn:focus:before,
.social-btns.btn:hover:before {
  /* Настраивает позицию кнопки при нажатии */
  top: -10%;
  left: -10%;
}
.social-btns.btn:before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  /* Поворачиваем btn:before на 45° по часовой стрелке */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Задаем цвет btn:before, то есть цвет фона кнопки после нажатия */
.social-btns.btn.facebook:before {
  background-color: #3b5998;
}
.social-btns.btn.twitter:before {
  background-color: #00aff0;
}
.social-btns.btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns.btn.google:before {
  background-color: #dc4a38;
}
.social-btns.btn.pinterest:before {
  background-color: #cc0000;
}

Предварительный просмотр эффекта:

Наконец, мы настроим переходы для кнопок, в основном используя атрибут transition-timing-function для настройки кривой скорости переходного эффекта, чтобы сделать его визуально гладьше.

Синтаксис transition-timing-function:

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]>, <number>, <number [0,1]>, <number> )

Добавьте следующий стиль в style.css:

.social-btns.btn,
.social-btns.btn:before,
.social-btns.btn.fa {
  transition: all 0.35s; /* все стили за 0.35 секунды с эффектом easing */
  transition-timing-function: cubic-bezier(
    0.31,
    -0.105,
    0.43,
    1.59
  ); /* задаем скорость переходного эффекта */
}

Предварительный просмотр эффекта:

Примечание: Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб - сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб - страницу.

Расширение знаний

Мы можем настраивать не только эффект при наведении на гиперссылку, но и использовать псевдо - классовые селекторы для настройки эффектов для не посещенных, посещенных и выбранных гиперссылок.

a:link {attribute: value;} настраивает эффект для не посещенных гиперссылок.
a:visited {attribute: value;} настраивает эффект для посещенных гиперссылок.
a:active {attribute: value;} настраивает эффект для выбранных гиперссылок.

✨ Проверить решение и практиковаться

Резюме

В этой Лаборатории мы узнали следующее:

Ссылки на библиотеку иконок Font Awesome
Псевдо-классовые селекторы CSS
Свойства трансформации CSS
Свойство display
Селектор before

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