Кнопка с картинкой css: css — Как сделать кнопку типа submit картинкой

Leave a Comment / Css / By /

Содержание

как правильно настроить размер области клика

У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?

Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:

В этой статье, мы рассмотрим несколько распространённых проблем с UX, а в конце покажем наглядный пример с нашего сайта.

UX-решения

Рекомендации WCAG

Согласно WCAG 2.1 (руководство по обеспечению доступности web-контента), минимальный размер для тач-элемента должен быть 44×44 CSS пикселя. Размер не фиксирован, но его можно взять за основу.

Закон Фиттса

Это закон, который описывает поведение пользователей на основе физиологических реакций и используется при проектировании UX. Если не вдаваться в подробности, его смысл в том, что на большой элемент, расположенный рядом с другими элементами, пользователь нажмёт быстрее, чем на маленький и отдалённый.

На рисунке ниже показаны два варианта расположения кнопки. С левой стороны кнопка меньше и дальше от поля ввода, чем справа, — пользователю понадобится больше времени для взаимодействия с ней. С правой же стороны кнопка большая и находится близко к полю ввода, что помогает быстро сориентироваться.

Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.

Кнопки

При необходимости можно использовать элемент <button>. Рассмотрим этот случай на существующей системе интернет-банкинга:

<div>Next</div>

Вот так выглядит эта кнопка:

При наведении курсора на кнопку он всё ещё выглядит, как указатель, и это нормально. Но если выделить текст, то появляется текстовый курсор. Такого не случится, если использовать правильные элементы.

Благодаря HTML-элементу <button>, пользователь сможет:

  • выбирать кнопку с помощью клавиатуры;
  • нажимать на кнопку с помощью мыши, клавиатуры или касания.

Кроме того, его можно реализовать без JavaScript.

Кнопкам нужны внутренние отступы, и вот почему:

  • тексту не должно быть «тесно»;
  • большую кнопку проще заметить (Закон Фиттса).

Ссылки

Эта ошибка встречается в интернете довольно часто. Если перед вами меню навигации,

padding должен быть у элемента <a>, а не <li>.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><nav href="#">Products</nav></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Team</a></li>
  </ul>
</nav>
.nav-item {
  padding: 12px 16px;
}

С таким кодом кликнуть можно будет только на текст:

Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы. Для этого можно использовать block, inline-element или flex.

.nav-item a {
  display: block;
  padding: 12px 16px;
}

Теперь вся область ссылки станет доступна для клика:

Гамбургер-меню

У гамбургер-меню должна быть достаточно большая область для клика, потому что в основном оно используется на сенсорных устройствах.

Предположим, что так выглядит область нажатия:

Попасть пальцем в такой маленький объект сложно. Но если увеличить эту область, то всё станет гораздо проще:

Можете попробовать самостоятельно в этом демо.

Чекбоксы и радио-кнопки

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

На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:

Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for:

<input type="checkbox">
<label for="option1">Option 1</label>

Или поместить input внутрь label:

<label for="option1">
    Option 1
    <input type="checkbox">
</label>

После нужно добавить padding для <label>, чтобы область клика стала больше:

Сайдбар

Часто на страницах с категориями кликабельная область ссылок не распространяется на всю ширину элемента списка.

Это происходит потому, что область клика находится только на текстовом элементе:

Чтобы исправить эту ситуацию, нужно:

  1. Удалить отступ из элемента <li> и переместить его в элемент <a>, как в пункте «Ссылки».
  2. Добавить display: block.
.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

После того, как будут выполнены эти действия, получим:

Примеры

В недавнем обновлении Твиттера появилась проблема с навигационным дизайном, связанная с размером кликабельной области. Сначала она была ограничена только текстом, как на скриншоте ниже, но после получения обратной связи её исправили:

Заголовок раздела

В некоторых случаях есть необходимость добавить кнопку «Показать ещё» или стрелку на краю заголовка раздела. В примере ниже стрелку поместили в искусственный круг, чтобы правильно центрировать её.

Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.

Использование псевдоэлементов для увеличения области клика

Не всегда возможно сделать кликабельную зону больше просто за счёт изменения ширины и высоты элемента или отступа. В этом случае на помощь приходят псевдоэлементы.

Как это работает?

Идея в том, что псевдоэлементы принадлежат своему родителю, поэтому, когда мы создаём такой элемент с определённой шириной и высотой, он будет вести себя как область клика/касания/наведения своего родителя.

Ниже псевдоэлемент :after добавлен к кнопке меню:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

Квадрат 55px специально расположен справа от элемента для наглядности.

Смотрите гифку ниже или попробуйте демо на Codepen.

Пример с нашего сайта

Недавно мы обнаружили на нашем сайте проблему: при попытке нажать на лайк с телефона на главной странице происходит переход на статью. Разобравшись в вопросе, оказалось, что рекомендуемый размер элемента для клика на touchscreen 48×48 dp. Иначе по нему сложно попасть на мобильных.

Чтобы решить эту проблему, нужно увеличить площадь клика за счёт паддингов, но при этом сохранить визуальное расположение элементов. Т.е. добавить положительный паддинг и отрицательный маргин, например. Или уменьшить внешние отступы.

Сейчас вот так:

Нужно вот так:

Как видно, кнопка осталась на своём месте, но область клика/тапа стала больше. При этом важно следить, чтобы области не пересекались.

Один из вариантов для лайков (не самый красивый, но рабочий)

.post-votes {
 margin: 0 5px;
}
 
.svelte-15n67pa {
 padding: 9px;
 margin: -9px;
} /* кнопки вверх/вниз */

Ещё круче вот так:

Код для правой кнопки (для левой зеркально):

padding: 14px 14px 14px 7px; 
margin: -14px -14px -14px -7px;

Адаптированный перевод статьи «Enhancing The Clickable Area Size»

Как пользоваться CodePen: подробное руководство для новичков

CodePen — онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.

  • Кому и когда может пригодиться CodePen
  • Как пользоваться CodePen: базовые настройки и возможности
  • Как работать с чужими публикациями, экспортировать и встраивать пены
  • Как работать с редактором проектов, писать посты, создавать коллекции
  • Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами
  • CodePen: больше чем песочница кода

Кому и когда может пригодиться CodePen

Инструмент можно использовать, чтобы быстро написать и оценить код, показать приложение другим людям, потренироваться. CodePen будет полезным всем разработчикам, имеющим дело с фронтендом.

Песочницу часто используют преподаватели программирования и вёрстки для демонстрации учебного кода. CodePen применяют авторы статей о разработке, когда нужно показать читателям пример кода.

Как пользоваться CodePen: базовые настройки и возможности

Попробовать песочницу можно без регистрации. Но чтобы иметь возможность сохранить код, нужно зарегистрироваться.

После регистрации создайте новый пен: нажмите кнопку Pen в меню.

Создаём новый пен

На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.

Пен готов к работе

Пен можно настраивать, для этого перейдите в раздел Settings. В первую очередь обратите внимание на раздел настроек Behavior. Я всегда выключаю автообновление превью, чтобы не отвлекаться на обновляющийся после каждого введённого символа экран.

Выключаем автообновления

В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.

Подключаем библиотеку Watch.js

В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.

После выбора настроек приступайте к работе. Обратите внимание, если вы отключили автообновление превью, для просмотра результатов нужно нажать кнопку Run.

Запускаем пен повторно, чтобы посмотреть превью после внесения изменений

В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.

Выбираем режим и лэйаут

Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:

  • Live View — демонстрация пена в режиме реального времени.
  • Collab Mode — режим групповой работы над пеном.
  • Professor Mode — режим для преподавателей.
  • Presentation Mode — режим для демонстрации пена с помощью проектора.

«Продвинутые» режимы доступны владельцам PRO-аккаунта

Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.

Работаем с консолью

Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.

Загрузка фото и других файлов

Выше описаны базовые инструменты и настройки CodePen, которых достаточно для того, чтобы создать пен и протестировать код. Дальше пойдёт речь о дополнительных возможностях CodePen.

Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.

Как работать с чужими публикациями, экспортировать и встраивать пены

На CodePen можно работать с любым публичным пеном. Для этого нужно зайти на страницу пена и форкнуть его с помощью соответствующей кнопки в правом нижнем углу экрана.

Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.

Встраиваем пены

В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.

Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.

Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.

Прямые ссылки на код

Как работать с редактором проектов, писать посты, создавать коллекции

Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.

В редакторе проектов можно создавать директории и файлы и организовывать код так, как это делается в реальных проектах. Вы можете редактировать код в отдельных файлах, а не в общем разделе HTML, CSS или JavaScript, как при работе с пенами. В редакторе проектов можно загружать изображения.

Интерфейс редактора проектов

В разделе Post можно писать заметки. Редактор поддерживает Markdown и визуальный режим. Есть возможность добавлять в посты изображения и встраивать пены.

Возможности для блогеров

Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.

Добавляем пен в коллекцию

Читайте также Обзор популярных школ программирования: личный опыт, плюсы, минусы и фейлы

Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами

CodePen позиционируется в качестве социальной среды для веб-разработки. То есть эта платформа сочетает характеристики онлайн-песочницы для тестирования кода и социальной сети.

Начните использовать социальные возможности CodePen с настройки личного профиля. В раздел Showcase добавьте пены, которые хотите показывать другим пользователям в первую очередь. Этот раздел можно рассматривать как портфолио. Для редактирования раздела нажмите кнопку Organize Showcase в профиле.

Организуйте портфолио

Перетяните лучшие пены в раздел Showcase.

Выберите лучшие работы и отправьте их в портфолио

В разделе Activity можно следить за взаимодействием пользователей с вашими пенами. В журнале сохраняются записи, когда кто-то лайкает, добавляет в коллекцию, форкает пен, подписывается на обновления и так далее. Вы тоже можете зафолловить других пользователей и следить за их активностью.

Следим за активностью пользователей

В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.

Ищем контент по интересам

В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников — платная функция, стоимость составляет 299 долларов за 60 дней.

Ищем работу и работников на CodePen

В разделе Grow — Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.

CodePen: больше чем песочница кода

CodePen действительно позволяет быстро написать и протестировать код. Онлайн-редактор поддерживает подключение библиотек, фреймворков и препроцессоров, имеет гибкие настройки.

В CodePen есть режимы для преподавателей и лекторов. Их удобно использовать для демонстрации кода студентам и участникам конференций. Отдельного внимания заслуживают социальные функции CodePen. Здесь можно искать интересный контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.

Css Image Button

Css Image Button

  • 13 сентября 2013 г. Изображение кнопки Css на нескольких компьютерах

    У меня есть компьютер и ноутбук. Нужно ли мне получать лицензию для обоих, или я могу купить одну и использовать ее в обеих установках?

  • 17 октября 2013 г. Не удалось получить кнопку ввода файла изображения css

    Должен ли я всегда иметь файл изображения или только если я использовал значки? Я не получил файл изображения при сохранении, но я также не использовал значки.

  • 21 сентября 2013 г. Изображение кнопки мегаменю css

    Я только что купил ваше CSS3Menu и у меня есть вопрос о вашем меню.

  • 05 июля 2013 г. Прокрутка изображения при наведении кнопки css

    Мы хотели бы подтвердить, что устройства должны поддерживать подменю с большой полосой прокрутки, как показано в приложении.

  • 29 марта 2013 г. Загрузка с помощью кнопки css с папками изображений на сервере

    Мне нравится ваше CSS3Menu. На моем компе работает корректно, а в ИНТЕРНЕТЕ не работает. Куда загружать сгенерированные файлы на моей подаче? в какой папке?

  • 12 сентября 2012 г. Выделенная кнопка в изображении меню css

    Я хочу только, чтобы в «Главном меню» была кнопка «Домой», выделенная на домашнем сайте.

  • 05 сентября 2012 г. Значки из кнопки изображения css

    У меня есть панель навигации со значками, как включить значки для работы с VS2010?

  • 04 сентября 2012 г. Изображение кнопки CSS и iframe

    Я только что нашел ваш сайт и скачал бесплатную версию для некоммерческие сайты. Как раскрывающийся список Android.

  • 18 ноября 2011 г. Кнопка изображения Css3 и рамки

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

  • 18 ноября 2011 г. Языки в изображении кнопки css3

    Я видел ваш хороший проект, но возможно ли использовать изображение кнопки css3 на языках LTR? (арабский,…) или использовать национальные символы?

Последние демонстрации

Свяжитесь с нами

Для устранения неполадок, запросов функций и общей помощи, обратитесь в службу поддержки клиентов по адресу . Убедитесь, что включить информацию о вашем браузере, операционной системе, Версия меню CSS3, ссылка на вашу страницу.
В большинстве случаев вы получите ответ в течение 1 рабочего дня. Пожалуйста, сначала прочитайте FAQ, чтобы узнать, был ли уже ответ на ваш вопрос.

См. Больше

  • CSS3 Изображение кнопки,
  • Кнопка изображения CSS3,
  • Изображение кнопки CSS,
  • Кнопка CSS с изображением
  • CSS Hover Image,
  • CSS Image,
  • CSS -Image,
  • CSS Image,
  • CSS CSS -Image,
    • CSS Image,
  • CSS CSS -Image,
  • CSS Image,
  • CSS CSS.
  • кнопка css3,
  • переключатель css3,
  • изображение меню css3,
  • кнопка формы css3,
  • кнопка прокрутки css3
  • меню навигации css
    • ,
  • вертикальное меню css

Исправьте кнопки Squarespace 7.1 (внутри фрагменты CSS) — Applet Studio

Справка Squarespace

Автор Ольга Колгушева

Все, что вы можете сделать с кнопками в Squarespace, используя собственный редактор и немного пользовательского кода

Совет: хотите улучшить конверсию вашего сайта? Используйте больше кнопок и логических призывов к действию.

Squarespace имеет встроенную коллекцию дизайнов кнопок, но иногда они кажутся довольно ограниченными.

Платформа совсем недавно добавила несколько новых форм кнопок — теперь вы можете добавлять овальные, подчеркнутые и лепестковые кнопки (поверх стандартных квадратных, закругленных и круглых кнопок).

Несмотря на то, что мы любим платформу Squarespace за ее простоту, многие кнопки по-прежнему явно отсутствуют. В этом посте мы покажем вам, как оформить кнопки Squarespace с помощью небольшого количества простого пользовательского кода, чтобы сделать ваши кнопки более удобными для конверсии и единообразными на всем вашем веб-сайте.

Понимание того, как кнопки работают в Squarespace 7.1

В Squarespace 7.1 есть четыре типа кнопок:

  • Кнопка как отдельный блок (ее можно добавить на любую страницу, если щелкнуть знак плюса при редактировании страница)

  • Кнопка как часть макета изображения, состоящая из изображения, текста и кнопки. Доступно 5 макетов изображений (карточка, коллаж, перекрытие, постер и стопка). Вы можете добавить их как блок на любую страницу (через меню блоков). Подробнее о том, что вы можете делать с блоками изображений, здесь.

  • Кнопка как часть формы или блока рассылки

  • Кнопка как часть раздела списка — это тип раздела, который имеет множество различных настроек для создания макетов

Все из этих типов кнопок наследуют основные настройки, которые мы применяем через меню дизайна.  

Перейдите в раздел Дизайн → Стили сайта → Кнопки. В этом меню вы можете выбрать форму кнопки, и она будет применяться ко всему вашему сайту. Вы также можете изменить отступы кнопок, и они будут применяться ко всему веб-сайту, за некоторыми исключениями.

Изменение цвета кнопок

В Squarespace 7.1 представлен упрощенный способ применения цветов. Перейдите в раздел Дизайн → Стили сайта → Цвета. Здесь вы можете настроить цветовую палитру, которая будет автоматически применяться ко всему вашему сайту. Squarespace также создаст 10 тем разделов — 10 уникальных цветовых профилей, которые применяются к разным разделам вашего сайта. Когда вы входите в режим редактирования страницы, щелкните значок пера в правом верхнем углу каждого раздела, вы можете изменить цветовую тему определенного раздела.

Чтобы изменить цвет конкретной кнопки (или любого другого блока), перейдите в раздел Дизайн → Стили сайта → Цвета и нажмите на цветовую тему соответствующего раздела. Вы увидите список блоков и их цветов. Вы можете изменить цвет на любой другой — вы не ограничены исходной палитрой и можете выбрать любой собственный цвет.

Изменение шрифта кнопки 

Логика аналогична: Перейдите в раздел Дизайн → Стили сайта → Шрифты. Вы можете настроить мастер-шрифты, которые будут применяться ко всему сайту, а также ко всем кнопкам. Ваши кнопки по умолчанию наследуют стиль абзаца. Если вы хотите что-то более индивидуальное, перейдите в раздел «Дизайн» → «Стили сайта» → «Шрифты» → «Кнопки» и измените параметр шрифта на «Пользовательский». Теперь вы можете выбрать собственный шрифт и его свойства (размер, межбуквенный интервал, толщину и т. д.). Эти настройки будут применяться ко всем кнопкам, которые являются автономными блоками и кнопками в макетах изображений.

Вы можете настроить кнопки форм и блоков рассылки, выбрав Шрифты → Назначить стили. В этом меню будут отображаться настройки для некоторых других блоков, включая формы. Просто имейте в виду, что вам нужно добавить блок формы на свой сайт, прежде чем получить доступ к этому меню.

Устранение распространенных проблем с кнопками Squarespace с помощью CSS

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

Давайте исправим некоторые из этих проблем с помощью пользовательского кода.

Окрашивание кнопок в разные цвета в зависимости от размера кнопки

Применение разных цветов к сплошным кнопкам в зависимости от размера кнопки. Измените шестнадцатеричный код цвета фона в приведенном ниже фрагменте кода на свой собственный. Вставьте этот код в Дизайн → Пользовательский CSS. Новые цвета будут применяться ко всем темам разделов. Вы можете изменить цвет маленьких, средних и больших кнопок. Если вы хотите изменить цвет текста, вы можете сделать это через панель цветовых тем на вкладке «Дизайн». 9=»sqs-блок-кнопка-контейнер»], .изображение-кнопка, .image-button.sqs-динамический текст { а { // Маленькие кнопки &.sqs-блок-кнопка-элемент—маленький { цвет фона: #FFFFFF; } // Средние кнопки &.sqs-блок-кнопка-элемент-средний { цвет фона: #FF9230; } // Большие кнопки &.sqs-block-button-element—large { цвет фона: #DBDCEB; } } }

Измените цвет кнопки в блоке рассылки

Измените HEX-код в следующем фрагменте и добавьте его в Дизайн → Пользовательский CSS.

 // Кнопки блока новостей
.newsletter-блок {
  .newsletter-form-button-wrapper {
    .newsletter-form-button {
      цвет: #FFFFFF !важно;
      background-color: #FF9230 !важно;
    }
  }
}

Сделайте все кнопки одинаковой ширины на настольных и мобильных устройствах

Сделайте дизайн более согласованным — сделайте все кнопки одинаковой ширины на мобильных и настольных устройствах. Следующий фрагмент будет применяться ко всем обычным кнопкам, кнопкам макета изображения, а также кнопкам блока новостной рассылки. Вы можете изменить отступы и ширину кнопок на рабочем столе, используя этот код. 9=»sqs-блок-кнопка-контейнер»], .изображение-кнопка, .image-button.sqs-динамический текст { а { минимальная ширина: 150 пикселей; отступы: 1.5rem 4rem !важно; Экран @media и (максимальная ширина: 768 пикселей) { padding: 1.5rem 0 !важно; минимальная ширина: 100%; ширина: 100%; } } } // Кнопки блока рассылки .newsletter-блок { .newsletter-form-button-wrapper { Экран @media и (максимальная ширина: 768 пикселей) { ширина: 100%; } .newsletter-form-button { минимальная ширина: 150 пикселей; отступы: 1.5rem 4rem !важно; Экран @media и (максимальная ширина: 768 пикселей) { padding: 1.5rem 0 !важно; ширина: 100%; } } } } // Кнопки закрытия

Исправление непропорциональных размеров кнопок в макетах изображений

Squarespace 7. 1 удален параметр динамического текста для кнопок в макетах изображений (карточка, стопка, коллаж, перекрытие и постер). В результате кнопки по умолчанию в этих блоках обычно выглядят непропорционально большими. Если вы хотите создать последовательный, отточенный дизайн веб-сайта, все кнопки должны быть одинакового размера.

Следующий фрагмент делает несколько вещей:

  • Изменяет размер шрифта

  • Применяет минимальную ширину ко всем кнопкам в макетах изображений: 150 пикселей

  • Применяет новые отступы ко всем кнопкам

  • Делает все эти кнопки шириной 100% на мобильных устройствах

 // Кнопки блокировки карты изображения
.изображение-кнопка,
.image-button.sqs-динамический текст {
 размер шрифта: 1.3em !важно;
 а {
 минимальная ширина: 150 пикселей;
 выравнивание текста: по центру;
 отступы: 1.5rem 4rem !важно;
 Экран @media и (максимальная ширина: 768 пикселей) {
 padding: 1.

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

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