Как создать эффекты наведения кнопки в Squarespace // Squarespace CSS Tutorial — InsideTheSquare.co
ПОЛЬЗОВАТЕЛЬСКАЯ ВЕРСИЯ CSS 7.1
Написано insidethesquare
Это руководство предназначено специально для последней версии Squarespace, известной как 7.1, и не будет работать для более старых версий Squarespace. Для получения дополнительной информации посетите https://insidethesquare.co/themes
В Squarespace может быть три уникальных стиля кнопок, но чтобы изменить внешний вид кнопки при наведении, вам понадобится немного пользовательского CSS и это именно то, чему вас научит этот учебник. Самое сложное — произнести правильное имя для нужной кнопки!
В Squarespace есть более 15 различных типов кнопок с уникальными именами. В этом руководстве рассматриваются основные блоки кнопок — первичный, вторичный и третичный.
Вы можете изменить все, что касается кнопки при наведении курсора, например, границы, фон, тень и стили шрифта.
Вот селекторы из видео:
Все блоки кнопок: (.sqs-block-button-element:hover)
Первичный: (.sqs-button-element—primary *or* .sqs-block-button-element—medium)
Вторичный: (.sqs-button-element—secondary *or* .sqs-block -button-element—large)
Tertiary: (.sqs-button-element—tretiary *or* .sqs-block-button-element—small)
Вот полный пример кода, который я использовал в учебник:
.sqs-block-button-elment: hover {
border-color: Purple!
background-color: #50bdb8!важно;
box-shadow: 5px 5px 15px 10px #DDD!важно;
вес шрифта: полужирный!важный
}
Вот ссылка на расширение Chrome, используемое в видео; Я являюсь поклонником, но не связан с этим расширением или его создателями: https://chrome.
Вот несколько связанных руководств, которые вы, возможно, захотите проверить. исходящий:
Чтобы узнать о стилях границ, посетите https://insidethesquare.co/borders
Чтобы узнать о вариантах цвета, посетите https://insidethesquare.co/colors
Новые стили кнопок Squarespace: параметры основных, дополнительных и третичных кнопок https://youtu.be/7Pk7-3gj4ZE
Как изменить цвет кнопки заголовка при наведении: https://youtu.be/dMHUh7OsiCE
ПОИСК В АРХИВАХ УЧЕБНЫХ ПОСОБИЙ
Понравился этот урок?Поделись с друзьями из Squarespace!
Версия 7.
1Версия 7 значок кнопки
внутри квадрата
Готовы к большему?
Узнайте, как использовать последнюю версию Squarespace, в моем бесплатном учебном курсе:
→ Бесплатный учебный курс 7.1
Возьмите мою памятку по CSS: более 30 страниц кодовых названий для Squarespace:
→ Загрузите памятку
Стать эксперт по CSS для Squarespace в моем авторском курсе:
→ Посетите Академию пользовательских кодов
https://insidethesquare.co
Создание анимации кнопки портфолио при наведении в Webflow
Бесплатно клонируйте взаимодействие здесь: https://webflow.grsm.io/interaction?interaction=webdev-for-you-daily-interaction-155
Добавление тонких эффектов к Кнопки на веб-сайте действительно могут добавить глубины и плавности статической странице. В следующей статье я расскажу, как создать простую, но эффектную анимацию кнопки портфолио в Webflow, не написав ни единой строчки кода.
Шаг 1: Добавьте блок ссылок
Добавьте блок ссылок и назовите его «link-block-wrapper».
Установите настройку отображения на flex:
- Направление: Горизонтальное
- Выравнивание: Растянуть
- По ширине: Начало
Установите типографику на:
- Шрифт: DM Sans (или любой другой шрифт, который вам нравится)
- Вес: 500-средний
- Размер: 14 пикселей
- Высота: 1-
- Цвет: черный или #000000
- Оформление: нет
- Межбуквенный интервал: 2 пикселя
- Заглавные буквы: ВСЕ ЗАГЛАВНЫЕ
Шаг 2: Добавьте форму таблетки
Добавьте блок div внутрь «обертки блока ссылок» и назовите его «кнопка-текст-обертка».
Установите настройку отображения на гибкость:
- Направление: Горизонтальное
- Выравнивание: По центру
- По ширине: По центру
Добавьте 20 пикселей отступа слева и справа и 10 пикселей поля справа.
Установите высоту блока div на 34 пикселя.
Добавьте сплошную рамку шириной 2 пикселя и черного цвета или #00000.
Установите радиус границы 100 пикселей.
Шаг 3: Добавьте текст
Добавьте текстовый блок внутри «текстовой оболочки кнопки» и введите «Просмотреть работу». Типографика уже должна быть оформлена, так как она будет наследовать стили, которые мы применили к родительскому блоку ссылок.
Шаг 4: Добавьте кружок
Внутри «оболочки блока ссылок» добавьте еще один блок div и назовите его «окружность-обертка».
Установите ширину и высоту на 34 пикселя.
Сделать переполнение скрытым.
Установите белый цвет фона или #ffffff.
Создайте сплошную рамку шириной 2 пикселя и черного цвета или #000000.
Установите радиус на 50%. Это создаст идеальный круг для этого div, потому что это идеальный квадрат 34 x 34 px.
Шаг 5: Добавьте значок стрелки
Внутри «круговой оболочки» добавьте элемент изображения и дайте ему имя класса «значок стрелки».
Добавьте значок стрелки вверх для изображения. Вы можете получить бесплатные иконки здесь: https://www.majesticons.com/.
Установите отступ для значка на 4 пикселя со всех сторон. Это немного уменьшит размер значка, чтобы он лучше помещался в круге. Вы можете изменить размер на все, что вам нужно для желаемого размера стрелки.
Скопируйте и вставьте этот «значок стрелки», чтобы внутри «обертки круга» было два изображения «значка стрелки». Только один должен быть видимым, так как «круговая обертка» имеет переполнение скрытого, поэтому все, что выходит за его границы 34 x 34 пикселей, не будет видно.
Шаг 6: Создание взаимодействия/анимации кнопки
Добавьте взаимодействие, выбрав «оболочку блока ссылок», а затем перейдя к символу молнии в правом верхнем углу. Вы можете выбрать «ссылочный блок-обёртку» прямо на холсте или через панель навигатора.
Нажмите значок + рядом с «Триггер элемента» и выберите «Наведение мыши». При наведении выберите действие и нажмите «Начать анимацию».
Выберите «circle-wrapper» и добавьте действие «BG Color», нажав + в правом верхнем углу. Установите цвет на белый или #ffffff, а затем установите его в качестве начального состояния, нажав «Установить как начальное состояние» в разделе «Время».
Выберите «значок стрелки» (либо на холсте, либо в навигаторе) и добавьте действие «Переместить». Переместите значок стрелки на -100% по оси Y. Установите продолжительность на 0,2 с и плавность.
Выберите значок «круг-обертка» и добавьте действие «BG Color». Установите цвет на любой цвет, который вы хотите. В приведенном выше примере я выбрал желтый цвет с шестнадцатеричным кодом #ffdf6d. Установите продолжительность на 0,2 с и плавность. Нажмите и удерживайте и перетащите это действие по времени на недавнее действие по времени «Переместить», чтобы они начинались вместе.
Выберите значок «круглая обертка» и добавьте действие «Цвет границы».
Установите цвет на тот же цвет, который был только что добавлен для «BG Color». В этом примере это будет #ffdf6d. Установите продолжительность на 0,2 с и плавность. Нажмите и удерживайте и перетащите это действие по времени на недавнее действие по времени «Переместить», чтобы они начинались вместе.
Нажмите «Готово», а затем перейдите к «При наведении». Здесь продублируйте взаимодействие «кнопка наведения», щелкните по нему и переименуйте его в «наведение кнопки». Здесь удалите начальное действие по времени, поэтому должно быть только три действия по времени (Перемещение, Цвет фона и Цвет границы).
Установите свойство перемещения на 0%.
Верните цвет фона на белый или #ffffff.
Установите цвет границы обратно на черный или #000000.
Это сбрасывает анимацию, когда пользователь наводит курсор на кнопку.
Вот оно!
Теперь вы создали уникальную анимацию при наведении кнопки в Webflow!
Чтобы начать работу с Webflow и следовать инструкциям, нажмите здесь: https://webflow.