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

Зайдя на сайт 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;
}

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

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

Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

Ангелина Писанюкавтор-переводчик статьи «Recreating Netlify’s Neat-o Sliding Button Effect»