Воссоздание эффекта аккуратной скользящей кнопки Netlify

Вы видели страницу прессы Netlify? Это одно из тех мест, где можно скачать логотип компании. Я искал его сегодня утром, потому что мне нужно было использовать логотип в качестве рекомендуемого изображения для поста на CSS-Tricks.

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

Они также интерактивны! Посмотрите, как они расширяются, и наведите курсор мыши на слово «Загрузить».

Хорошо, верно ?! Я на самом деле заметил, что в Сафари они немного отстали.

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

См. Ручку
Netlify Sliding Buttons Джоффом Грэмом (@geoffgraham)
в CodePen.

Как они это сделали? Рецепт действительно сводится к четырем ингредиентам:

• Использование свойства left для перемещения метки «Загрузка» в вид и из поля зрения
• Использование отступа в состоянии наведения кнопки, чтобы создать дополнительное пространство для отображения надписи «Загрузить» при наведении курсора
• Объявление масштабирования 1: 1 () в состоянии наведения кнопки, поэтому весь контент остается включенным, когда все движется.
• Указание перехода для заполнения кнопки background-position значка кнопки и свойства преобразования для создания для плавная анимация между состоянием кнопки по умолчанию и наведением курсора.

Вот как это выглядит без всех стилей представления:

См. Pen
Скользящие кнопки Netlify без стиля, автор Geoff Graham (@geoffgraham)
на CodePen.

Если вам трудно представить, что происходит, вот иллюстрация, показывающая, как метка «Скачать» скрыта за пределами кнопки (благодаря переполнению : скрыто ) и где она отображается при наведении.

Итак, поместив отрицательные левые значения на значок и метку «Скачать», мы выталкиваем их из поля зрения и затем возвращаем их в положительные значения когда вся кнопка зависла.

  / * Естественное состояние * /
.button {
    фон:
      # f6bc00
      URL (данные: изображение / SVG + XML; base64, ...)
      без повтора -12px центр;
    переполнение: скрытое;
}
  
.button span: nth-child (1) {
  положение: абсолютное;
  слева: -70px;
}

/ * Hovered State * /
.button: hover {
  отступ слева: 95 пикселей;
  background-position: 5px center;
}

.button span: nth-child (1) {
  положение: абсолютное;
  слева: -70px;
}  

Обратите внимание, что если оставить вещи в этом состоянии, значок кнопки будет скользить в поле зрения и создаст достаточно места для метки «Загрузить», но метка будет фактически всплывать с кнопки при наведении.

См. Pen
Скользящие кнопки Netlify без стиля, автор Geoff Graham (@geoffgraham)
на CodePen.

Вот где добавление масштаба 1: 1 к кнопке помогает держать вещи в такте.

  * Hovered State * /
.button: hover {
  отступ слева: 95 пикселей;
  background-position: 5px center;
  преобразование: масштаб (1, 1);
}  

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

Последний ключевой ингредиент — это свойство transition которое заставляет все плавно скользить по своим местам, а не давать им щелкать. Это обеспечивает гораздо более приятный опыт.

  / * Естественное состояние * /
.button {
    фон:
      # f6bc00
      URL (данные: изображение / SVG + XML; base64, ...)
      без повтора -12px центр;
    переполнение: скрытое;
    переход: отступы .2s easy, background-position .2s easy, transform .5s easy;
}  

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

См. Pen
Netlify Sliding Buttons Джоффом Грэмом (@geoffgraham)
на CodePen.