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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *