Пример как использовать микроинтеракции на основе CSS и JavaScript для кнопок

●
0 комментариев
●
8
Пример как использовать микроинтеракции на основе CSS и JavaScript для кнопок
Пример как использовать микроинтеракции на основе CSS и JavaScript для кнопок
Содержание показать

В физическом мире некоторые вещи реагируют, когда мы их щелкаем или нажимаем, например, выключатели света. Некоторые предметы светятся или издают звук, например, кнопки на банкомате. Эти реакции — это «микровзаимодействия» (микроинтеракции), которые сообщают нам о том, что мы успешно что-то сделали. В этой статье мы рассмотрим десять простых способов добавить микровзаимодействия к кнопкам на веб-странице.

Что такое микроинтеракции?

Микроинтеракции — это небольшие действия или анимации в пользовательском интерфейсе. Они обеспечивают мгновенную обратную связь пользователям при выполнении ими действий. Микроинтеракции поддерживают вовлеченность пользователей и могут улучшить их общее впечатление от использования интерфейса.

Примерами микро-взаимодействий могут служить индикатор набора текста при онлайн-чате, индикатор выполнения загрузки файла и индикатор загрузки при обновлении страницы.

Кнопки — один из наиболее распространенных интерактивных элементов на веб-сайтах, и они могут выполнять множество задач, таких как переключение, отправка, удаление, закрытие, выбор (с помощью переключателей, кнопок выбора или выпадающих меню) и так далее.

Упругое 3D микровзаимодействие

Мы можем использовать свойство CSS transform для создания трёхмерной кнопки, которая будет отскакивать при нажатии. Прежде чем начать, посмотрите на изображение ниже, чтобы увидеть, к чему мы стремимся.

Вот HTML-код этой кнопки:

<body>
  <button class="btn"><span class="text">Нажмите меня</span></button>
</body>

В этом примере мы вкладываем <span> элемент внутрь элемента <button>. Обычно это не требуется при создании кнопки, но нам это необходимо для создания окончательного трехмерного вида кнопки.

Элемент <button> имеет имя класса btn, а элемент <span>, содержащий текст «Нажмите меня», имеет имя класса text. Эти элементы образуют две отдельные части кнопки — верхнюю и боковые.

.btn {
  position: relative;
  background: #004958;
  border-radius: 15px;
  border: none;
  cursor: pointer;
}

.text {
  display: block;
  padding: 15px 45px;
  border-radius: 15px;
  background: #00c2cb;
  font-size: 1.5rem;
  font-weight: 500;
  color: #42455a;
}

Для создания боковых сторон кнопки мы воспользуемся свойством, transform позволяющим переместить текст вверх. Это создаст эффект 3D.

Затем мы анимируем это свойство, изменяя его значение по вертикали вдоль оси Y, чтобы создать эффект подпрыгивания при нажатии кнопки (то есть, когда она находится в состоянии :active):

.text {
  display: block;
  padding: 15px 45px;
  border-radius: 15px;
  background: #00c2cb;
  font-size: 1.5rem;
  font-weight: 500;
  color: #42455a;
  transform: translateY(-6px);
  transition: transform ease 0.1s;
}

.btn:active .text {
  transform: translateY(-2px);
}

Добавление звука щелчка к кнопке

Звук может быть формой микроинтеракции — например, при нажатии кнопок мыши. Привязка звука к действиям на веб-странице может быть особенно полезна для пользователей планшетов и мобильных устройств.

Во-первых, вот HTML-код кнопки:

<button>Нажми меня</button>

В этом примере стиль не важен. Чтобы воспроизвести звук щелчка физической кнопки, нам понадобится JavaScript. Мы создадим объект Audio и укажем источник звука щелчка:

var mouseclick = new Audio();
mouseclick.src = "/click.wav";

Этот звук будет воспроизводиться при нажатии пользователем кнопки. Для этого мы добавим 
onmousedown к кнопке событие:

<button onmousedown="mouseclick.play()">Нажми меня</button>

Примечание: мы не можем присвоить аудиообъекту имя click, поскольку это зарезервированное слово, и его нельзя использовать в качестве имени переменной.

В следующем примере на CodePen показана работа нашей кнопки при нажатии.

Кнопки с анимацией границ

Существует несколько способов анимировать границу кнопки, поэтому мы рассмотрим несколько примеров.

Простое микровзаимодействие с border

Начнём с чего-нибудь простого. Обычно, если мы хотим добавить границу к какому-либо элементу, мы используем свойство ‘border’. Но в CSS у нас также есть outline свойство ‘find’, которое очень похоже. Оно добавляет контур вокруг элемента. Контуры проходят поверх элемента, к которому они применяются, то есть они рисуются вокруг границы.

Они даже обозначены одинаково. Вот пример кнопки с контуром и рамкой:

button {
  border: 3px solid cyan;
  outline: 3px solid red;
}

На скриншоте ниже показано, как это выглядит.

Контуры не влияют на размеры основного элемента (в данном случае кнопки) и могут перекрывать другой контент или элементы. Мы также можем изменить их положение с помощью соответствующего outline-offset свойства.

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

button {
  border: 2px solid #00c2cb;
  outline: 2px solid #00c2cb;
  outline-offset: -2px;
  transition: outline-offset 200ms ease;
}

button:hover {
  outline-offset: 3px;
}

По сути, кнопка имеет вторую рамку. Это позволяет осуществить простое микровзаимодействие.

Следующий Pen демонстрирует это в действии.

Эффекты наведения курсора на кнопку с использованием псевдоэлементов

Теперь перейдём к чему-то более сложному. Мы будем использовать псевдоэлементы ::before и ::after, а также inset свойство для создания красивых анимаций границ.

Изображение ниже демонстрирует, чего мы хотим добиться с помощью этой микроинтеракции с кнопкой.

Мы будем настраивать стили шаг за шагом, начиная с основного <button>:

button {
  position: relative;
  background: transparent;
  padding: 15px 45px;
  border-radius: 15px;
  border: none;
  font-size: 1.5rem;
  color: #e0ffff;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

Это inset свойство отодвигает элемент от родительского элемента по горизонтали и вертикали:

button::before {
  content: '';
  position: absolute;
  inset: 0px 50px;
  background: #42455a;
  transition: inset 350ms ease;
  z-index: -1;
}

Отступ был сначала добавлен к ::before псевдоэлементу для этой кнопки. Он имеет значение 0px 50px, поэтому будет применяться только к оси Y.

Вот как будет выглядеть кнопка на данном этапе, если оставить только этот ::before элемент:

Далее добавляем ::after псевдоэлемент:

button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: #22232e;
  z-index: -1;
}

Этот ::after псевдоэлемент будет перекрывать другой ::before псевдоэлемент, оставляя зазор размером с него inset и, таким образом, создавая границу.

На изображении ниже показано, как будет выглядеть кнопка при наведении на неё курсора.

Чтобы получить окончательный вид, мы добавим overflow: hidden к основному <button> элементу кое-что ещё. Это уберёт квадратные углы и завершит микро-взаимодействие этой кнопки.

В следующем примере (Pen) представлен работающий пример.

Анимация границы на круглой кнопке

Придерживаясь описанного выше метода, мы можем создать анимацию границы для круглой кнопки. Для этого нужно задать значение border-radius и 50% одинаковую высоту и ширину. В этом примере мы будем использовать большую часть стилей предыдущей кнопки.

Вот CSS-код:

button {
  background: #42455a;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

button::before {
  content: '';
  position: absolute;
  inset: -1px 30px;
  background: #00c2cb;
  transition: 500ms;
  animation: rotate 4s linear infinite;
  z-index: -1;
}

button:hover::before {
  inset: -1px;
}

button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #22232e;
  z-index: -1;
}

На следующем скриншоте показано, как всё выглядит на данный момент.

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

На этом этапе мы можем внести небольшое изменение, повернув ::before с помощью CSS-анимации:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

На CodePen ниже показан окончательный результат этой микроинтеракции с кнопкой.

Микроинтеракции пульсаций

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

Для создания этой микроинтеракции мы воспользуемся JavaScript. Вот код JavaScript после стилизации кнопки:

let btn = document.querySelectorAll("button");
btn.forEach((btn) => {
  btn.onclick = function (e) {
    let x = e.pageX - e.target.offsetLeft;
    let y = e.pageY - e.target.offsetTop;
    let ripples = document.createElement("span");

    ripples.style.left = x + "px";
    ripples.style.top = y + "px";
    this.appendChild(ripples);

    setTimeout(() => {
      ripples.remove();
    }, 2000); /*1000 = 1s*/
  };
});

Функция click отслеживает координаты x и y щелчка мыши и создает новый <span> элемент. Каждый элемент <span> представляет собой волну, и мы используем setTimeout() для ее удаления через две секунды.

Далее следует CSS-код. Мы стилизуем волны и используем CSS-анимацию для изменения их размера и прозрачности. Это создаст эффект ряби.

Вот CSS-код элемента <span>:

button span {
  position: absolute;
  background: #004958;
  transform: translate(-50%,-50%);
  pointer-events: none;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
  transition: 0.5s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

В следующем примере на CodePen показан результат.

Микроинтеракции, изменяющие форму кнопки

Кнопка, трансформирующаяся в другую форму, создаст интересное микро-взаимодействие. Это можно использовать для подтверждения отправки.

На следующем скриншоте показано, что у нас должно получиться на выходе.

Как всегда, начнём с оформления основного <button> элемента. В этом примере мы добавим иконку галочки из Font Awesome:

<button>
  Отправить
  <i class="fa-solid fa-check"></i>
</button>

Вот CSS-код:

button {
  position: relative;
  padding: 15px 45px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border-radius: 15px;
  border: 2px solid #00c2cb;
  background: none;
  color: #00c2cb;
  cursor: pointer;
  outline: none;
  transition: 200ms;
}

i {
  position: absolute;
  color: transparent; /* To hide the check icon */
  transition: 200ms;
}

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

Вот CSS-код для изменения формы кнопки:

button:focus {
  color: transparent;
  outline: none;
  border: 2px solid transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 25px 25px;
  border-left: 2px solid #00c2cb;
  animation: spin 2s 500ms forwards;
}

Если присвоить кнопке одинаковую ширину и высоту, border-radius: 50% она изменит свою форму на круглую. Это border-left свойство используется для анимации загрузки.

Вот код @keyframes для создания анимации вращающейся загрузки. Мы будем использовать следующее transform свойство:

@keyframes spin {
  80% {
    border: 2px solid transparent;
    border-left: 2px solid #00c2cb;
  }
  100% {
    transform: rotate(720deg);
    border: 2px solid #00c2cb;
  }
}

Наконец, значок галочки отобразится, но только после анимации вращения. Это означает, что будет задержка. Мы можем указать задержку с помощью animation-delay CSS или добавив второе значение времени к animation сокращенному свойству. Первое значение времени всегда будет равно продолжительности анимации:

button:focus i {
  animation: check 300ms 2300ms forwards;
}

@keyframes check {
  to {
    color: #00c2cb;
  }
}

На этом микровзаимодействие с кнопками завершено. Мы можем настроить задержку и длительность, чтобы всё синхронизировать по своему вкусу.

В приведенном ниже примере на CodePen показан конечный результат.

Микроинтеракция «Изменение текста»

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

Начнём с обычной кнопки с текстом. При нажатии на кнопку начнётся анимация загрузки, а затем, в конце, появится новый текст.

Вот HTML-код:

<button>
  <i class="fa-solid"></i>
  <span class="btn-text">Click Me</span>
</button>

Вложенные в этот элемент два элемента <button> — это иконка загрузки и текст. Эта конкретная иконка взята из Font Awesome: <i class="fa-solid fa-circle-notch"></i>. Как видите, у кнопки отсутствует одно из имен классов: оно будет добавлено позже с помощью JavaScript.

Вот CSS-код для анимации вращающейся загрузки:

.fa-circle-notch {
  animation: animate 1s ease infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

Осталось только написать функцию JavaScript:

btn = document.querySelector("button"),
icon = document.querySelector("i"),
btnText = document.querySelector(".btn-text");

btn.onclick = function () {
  btn.style.cursor = "wait";
  btnText.textContent = "";
  icon.classList.add("fa-circle-notch");

  setTimeout(() => {
    btn.style.pointerEvents = "none";
    btnText.textContent = "done";
    icon.style.display = "none";
  }, 3000);/*1000 = 1s*/
}

Начнем с основных элементов — кнопки <button>, значка и текста. Затем для функции обработки клика изменим стиль курсора, удалим текст кнопки и добавим недостающее имя класса для значка загрузки. Наконец, используем setTimeout()для добавления нового текста кнопки и скрытия значка загрузки.

В приведенном ниже примере на CodePen показан окончательный результат.

Микровзаимодействие «Смена значка»

Этот пример идеально подходит для использования переключателя темы со светлой на темную.

Вот HTML-код этой кнопки:

<div class="toggle-btn">
  <div class="icon">
    <i class="fa-solid fa-moon"></i>
  </div>
</div>

Вот CSS-код:

.toggle-btn {
  position: relative;
  height: 50px;
  width: 100px;
  background-color: #42455a;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.toggle-btn .icon {
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  font-size: 30px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #42455a;
  border: 1px solid #999;
  border-radius: 50%;
  transition: all 0.4s ease;
}

Это создаст начальное состояние кнопки-переключателя. Следующий шаг — добавить стили для её активного состояния:

.toggle-btn.active {
  background: #e0ffff;
}

.toggle-btn.active .icon {
  left: calc(100% - 59px);
  color: #e0ffff;
  border: 1px solid #e0ffff;
}

.toggle-btn.active .icon i {
  animation: spin 0.5s;
}

@keyframes spin {
  to {
    transform: rotate(0.5turn);
  }
}

Мы будем управлять приведенным выше CSS с помощью JavaScript. Мы будем использовать JavaScript для переключения кнопки, изменяя при этом иконку:

const toggleBtn = document.querySelector(".toggle-btn"),
  lockIcon = document.querySelector(".icon i");

toggleBtn.addEventListener("click", () => {
  toggleBtn.classList.toggle("active");

  if(toggleBtn.classList.contains("active")) {
  lockIcon.classList.replace("fa-moon", "fa-sun");
  } else
 lockIcon.classList.replace("fa-sun", "fa-moon");
})

В приведенном ниже примере на CodePen показан окончательный результат.

Дрожащие иконки Микроинтеракции

С помощью функции transform: rotate() мы можем заставить значки кнопок дрожать при нажатии или наведении курсора. Это отлично подходит для кнопок подписки или уведомлений.

Вот CSS-код, который мы можем использовать для этого:

button:hover i {
  animation: shake .2s ease-in-out .2s infinite alternate;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(-10deg) scale(1.2);
  }
  100% {
    transform: rotate(10deg) scale(1.2);
  }
}

Всё очень просто: мы добавляем анимацию к :hover состоянию :focus кнопки. transform Затем свойство можно применить с помощью @keyframes.

В следующем примере на CodePen этот эффект демонстрируется на практике.

Микровзаимодействие Glow Up

Для финального микро-взаимодействия с кнопкой мы сделаем так, чтобы она светилась при наведении курсора. Для этого нам понадобится комбинация псевдоэлементов и соответствующего box-shadow свойства.

На изображении ниже показано, как будет выглядеть наша кнопка.

Вот HTML- код этой кнопки:

<button><span class="btn-text">Click me</span></button>

А вот и CSS-код:

button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}

button .btn-text {
  padding: 14px 45px;
  font-size: 25px;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  background: rgba(0,73,88,0.05);
  backdrop-filter: blur(15px);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}

На этом этапе у нас должна получиться обычная кнопка. Чтобы добавить панель внизу, мы воспользуемся псевдоэлементом ::before:

button::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}

Этот box-shadow добавляет свечение, которое прекрасно дополняется текстом backdrop-filter на кнопке.

Для завершения этого микровзаимодействия мы увеличим размер псевдоэлемента при наведении курсора:

button:hover::before {
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

В следующем примере на CodePen этот эффект работает на практике.

Сочетание микроинтеракции кнопок

Каждый из примеров хорош сам по себе, но мы можем комбинировать некоторые из них, чтобы добиться еще большего количества микро-взаимодействий. Например, кнопка с эффектом подпрыгивания будет работать со звуком щелчка. Звук может соответствовать назначению кнопки, например, звонку уведомлений. Анимацию встряхивания можно добавить к кнопке отправки, чтобы указать на то, что действие отклонено или недействительно.

Преимущества микроинтеракции

Микроинтеракции — это не просто какие-то причудливые эффекты. Они играют важную роль в улучшении пользовательского опыта. Есть несколько причин, почему микроинтеракции полезны для ваших веб-сайтов.

Как мы видели в начале этой статьи, микроинтеракции обеспечивают мгновенную обратную связь. Представьте, что вы нажимаете кнопку отправки, и ничего не происходит: невозможно узнать, было ли это действие успешным или нет. Наличие микро-взаимодействий сделает ваш веб-сайт более привлекательным.

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

Заключение

Мы рассмотрели, как создать микроинтеракции для кнопок. Начали с 3D-кнопки с эффектом подпрыгивания, затем перешли к добавлению звука и анимации границ. Мы также рассмотрели, как добавить эффект пульсации при нажатии на кнопку, а также как изменить форму, текст и значок кнопки. В заключение мы добавили эффект свечения при наведении курсора.

Важно придерживаться простоты: каждое микро-взаимодействие должно иметь свою цель. Как мы уже видели, некоторые из этих взаимодействий требуют довольно много кода, поэтому лучше использовать их в разумных количествах. Простота – залог успеха.

Вы можете попробовать комбинировать некоторые из них, чтобы создать больше микро-взаимодействий.

Часто задаваемые вопросы (FAQ) о микро-взаимодействиях с кнопками

Что такое микро-взаимодействия (Микроинтеракции) кнопок?

Микро-взаимодействия (микроинтеракции) с кнопками — это едва заметные анимации или элементы дизайна, которые возникают, когда пользователь взаимодействует с кнопкой на веб-сайте или в приложении. Они предназначены для предоставления визуальной обратной связи пользователю, улучшая общее впечатление от использования. Например, кнопка может менять цвет, форму или размер при нажатии, указывая на то, что действие пользователя было подтверждено и обрабатывается.

Почему микроинтеракции с помощью кнопок важны в веб-дизайне?

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

Как реализовать микроинтеракции с помощью кнопок на моём сайте или в приложении?

Реализация микроинтеракции с помощью кнопок включает в себя сочетание дизайна и программирования. Вам потребуется разработать визуально привлекательный и интуитивно понятный интерфейс, а затем запрограммировать его с помощью HTML, CSS и JavaScript. Существуют также различные библиотеки и инструменты, которые могут упростить этот процесс, такие как Animate.css, Hover.css и GreenSock.

Могут ли микроинтеракции с помощью кнопок повысить коэффициент конверсии веб-сайта?

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

Существуют ли какие-либо рекомендации по использованию микроинтеракций с помощью кнопок?

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

Как я могу проверить эффективность своих микро-взаимодействий с кнопками?

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

Можно ли использовать микроинтеракции с кнопками на мобильных устройствах?

Да, микроинтеракции с кнопками можно использовать на мобильных устройствах. Однако их, возможно, потребуется адаптировать к меньшему размеру экрана и сенсорному интерфейсу. Например, эффекты при наведении курсора, которые хорошо работают на настольных компьютерах, могут не подойти для мобильных устройств, поскольку отсутствует курсор для запуска эффекта.

Какие существуют распространённые примеры микро-взаимодействий с кнопками?

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

guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии