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

0 ∞ 1

Зайдя на сайт Netlify, я заметил красивые кнопки для загрузки. Они маленькие. При этом заметные и интерактивные! Они растягиваются, если навести курсор. Но в браузере Safari эти кнопки выглядят странно.

Я воссоздал их в качестве демо-версии, убрав некоторые недостатки.

При реализации такой кнопки я использовал:

  • Свойство left для перемещения надписи «Скачать».
  • Свойство padding при наведении курсора мыши на кнопку, чтобы создать дополнительное пространство для отображения надписи «Скачать».
  • Свойство scale() со значением 1,1, чтобы при взаимодействии все содержимое оставалось внутри кнопки.
  • transition для отступов, background-position для значка кнопки и свойство transform, чтобы обеспечить плавную анимацию между состоянием кнопки по умолчанию и при наведении курсора мыши.

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

Ниже продемонстрировано, как метка «Скачать» скрыта за пределами кнопки с помощью overflow: hidden. И где она отображается при наведении курсора мыши.

Эффект буквицы

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

CSS

/* Состояние по умолчанию */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}
  
.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* Состояние при наведении */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

Если оставить код без изменений, значок кнопки будет виден и создаст достаточно места для надписи «Скачать». Но при наведении курсора она будет съезжать с кнопки.

Это можно исправить, применив к кнопке transform: scale(1, 1).

CSS

/* Состояние при наведении */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

Значения свойства padding – магические числа. Они могут изменять в зависимости от используемого шрифта, его размера и других факторов.

Последний ключевой компонент – свойство transition, которое заставляет все плавно скользить.

CSS

/* Состояние по умолчанию */
.button {
    background: 
      #f6bc00 
      url(data:image/svg+xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

Добавьте несколько деталей, таких как закругленные углы, и кнопка станет идеальной.