Как пользоваться: CSS-кнопки
- Наведите курсор на кнопки и выберите понравившийся стиль.
- Задайте цвета, размер, радиус скругления и скорость, а также состояния при наведении, нажатии и клике. Каждый стиль обновляется сразу.
- Скопируйте CSS и HTML или нажмите Копировать всё, чтобы получить один блок.
- Для Webflow нажмите Копировать в Webflow и вставьте код в Designer сочетанием Ctrl/⌘+V.
Эффекты наведения, которые не утяжеляют страницу
Все стили здесь написаны на чистом CSS, за исключением одного стиля с «проходящей» линией, который добавляет небольшой встроенный SVG. Без библиотек и без JavaScript. Цвета задаются через пользовательские свойства в начале правила, поэтому чтобы перекрасить кнопку позже, достаточно поменять два-три значения.
- Пользователи с клавиатуры получают видимую рамку
:focus-visibleв каждом стиле. - Режим уменьшенного движения учитывается: для посетителей, которые просят меньше анимации, движение отключается.
- Ссылки или кнопки: используйте
<a>, чтобы перейти на другую страницу, и<button>, чтобы выполнить действие. CSS работает с обоими элементами.
Состояния при наведении, нажатии и клике
Для каждой кнопки заданы цвет текста при :hover и цвет и размер при :active. Включите Состояние «нажато», чтобы добавить стиль .is-clicked с коротким скриптом. Это удобно для кнопок «Нравится», «Сохранить» или «Подписаться». Выберите rem, чтобы размер кнопки считался относительно размера шрифта корневого элемента, при условии стандартного для браузера значения 16px. Тонкие линии 1px и 2px остаются в пикселях, чтобы оставаться чёткими.
Использование стиля в Webflow
Копировать в Webflow вставляет элемент Embed, в котором находятся стили и сама кнопка. Webflow не умеет создавать анимации псевдоэлементов в панели стилей, поэтому Embed сохраняет эффект точно таким, каким он задуман. Если вы хотите стилизовать свои кнопки, добавьте CSS в пользовательский код сайта и присвойте кнопкам нужный класс.
Хотите собрать кнопку с нуля? Воспользуйтесь генератором CSS-кнопок. Проверить читаемость текста можно в проверке контрастности, а анимированные кнопки меню посмотрите в разделе иконки бургер-меню.
Также ищут как: анимация кнопки при наведении, кнопка webflow при наведении.
Инструменты, которые хорошо сочетаются с CSS-кнопки
- Генератор CSS-анимаций при наведении — Создавайте анимации при наведении для кнопок, карточек, ссылок и иконок.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.