Состояние "disabled" не применяется к таким кнопкам потому что :
Нельзя просто так взять и запретить активное действие!
Buttons
Основная кнопка
Для главных действий в пользовательских сценариях. Такая кнопка всегда одна на странице или во всплывающем/модальном окне. Если кнопок на странице две и более, одна из них обязательно будет основной, а остальные – контурные. Это означает, что одно дейстие при проектировании сценария задумывалось как самое приоритетное.
Все десктопные версии кнопок могут иметь внутри себя иконку около подписи. Кнопками с иконками лучше не злоупотреблять: это дополнительный способ выделить одно ключевое действие или добавить интерфейсу немного эмоциональности. Иконка должна быть четко согласована с подписью по смыслу, не вызывая двусмысленных ассоциаций.
В большинстве интерфейсов используется темная кнопка на белом фоне. У темной кнопки может быть только один цвет заливки#1F2229#1F2229.
Для некоторых случаев может использоваться инвертированная кнопка: то есть, с белой заливкойFFFFFF#FFFFFF и темным текстом1F2229#1F2229. Инвертированная кнопка применяется только для страниц со сплошной темной фоновой заливкой, а также для видеотизеров. Темный фон у страницы подчеркивает либо статусность продукта (например, тариф «Премиум»), либо его технологичность (интерфейс виртуального помощника Мии). Если несколько кнопок расположены рядом на странице с темным фоном, то одна из них будет со сплошной белой заливкой, остальные – с белым контуром.
Для блоков с видео мы также используем белую кнопку, так как видео обычно затемняется прогаммными средствами. Использование затемнения и белой кнопки делают кнопку видимой на фоне любого видеоряда.
Отступы от подписи до краев кнопки в десктопе по 45 px, в мобильной версии – по 35 px. Соответственно, ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, для десктопа она составляет 60 px, для мобильной версии – 48 px.
Цветные кнопки не допускаются. Однако, кнопка может размещаться на цветном однородном фоне из палитры Tele2. Размещать кнопки на фоне с паттерном или поверх фотографий не допускается.
Иногда нажатие кнопки подразумевает, что пользователь помимо основного действия дает согласие на обработку персональных данных или принимает какие-либо требования или правила. В таких случаях мы используем следующую конструкцию: кнопка + мелкий текст, в который «зашита» ссылка на юридический документ. Мы не используем чекбокс для таких случаев.
Варианты использования:
В мобильной версии большая кнопка меняет свой размер на btn--middle автоматически.
Обычный вариант
Неактивная кнопка не используется Почему?
Кнопка может содержать иконку
Маленькая кнопка
<a class="btn btn-primary">Основная кнопка</a>
<a class="btn btn-primary btn--medium">Основная кнопка средняя</a>
<a class="btn btn-primary btn--small">Основная кнопка маленькая</a>
<a class="btn btn-primary"><i class="ico icon-search"></i> поиск</a>
Когда используется маленькая кнопка
Для однородных и важных «продающих» действий, например, кнопка «Купить» под фотографиями товаров в интернет-магазине. Можно использовать для прилипающих плашек, если важно сохранить их компактный размер и стандартная кнопка будет слишком велика.
Размер единый для мобильного и десктопного интерфейсов. Отступы от подписи до краев кнопки по 20 px. Ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, она составляет 40 px.
Когда используется большая кнопка
Для второстепенных действий в пользовательских сценариях. Таких кнопок может быть одна или две на странице или в поп-апе рядом с основной кнопкой. Большая контурная кнопка используется для действий типа «Отключить» на страницах тарифов и услуг.
Также используется для кнопки «Закрыть» во всплывающих окнах, даже если это действие единственное.
У контурных кнопок цвет контура также может быть только 2229#1F2229 или 2229#FFF в зависимости от цвета фона страницы. Кнопки с цветным контуром недопустимы. Кнопка может размещаться на цветном однородном фоне из палитры Tele2. Размещать кнопки на фоне с паттерном или поверх фотографий не допускается.
Отступы от подписи до краев кнопки в десктопе по 45 px, в мобильной версии – по 35 px. Соответственно, ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, для десктопа она составляет 60 px, для мобильной версии – 48 px.
Контурная кнопкаКогда используется маленькая кнопка
Для однородных действий, стоящих в одном горизонтальном или вертикальном ряду. Размер единый для мобильного и десктопного интерфейсов. Не имеет неактивного состояния.
Размер единый для мобильного и десктопного интерфейсов. Отступы от подписи до краев кнопки по 20 px. Ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, она составляет 40 px.
Контурная кнопка<a class="btn">Контурная кнопка</a>
<a class="btn btn--small">Контурная кнопка маленькая</a>