Css кнопки с svg

Как сделать кнопку в HTML

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Атрибут disabled блокирует доступ к кнопке.

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

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

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .

Как сделать кнопку с иконкой

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

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

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

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

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Кнопки с масками на основе SVG

В этой статье мы увидим, как сделать не просто кнопки, а кнопки-иконки, доступные для людей с ограниченными возможностями, с помощью SVG и CSS, не перегружая HTML-код встроенным кодом , но при этом используя возможность делать разные настройки.

Сначала давайте определим, чего мы хотим достичь при выводе нашего элемента-кнопки с иконкой:

• Интерактивности;
• Управления с клавиатуры;
• Доступности;
• Настраиваемости

… и мы достигнем всего этого с помощью только HTML и CSS! Ведь это же волшебство (It’s magic, isn’t it)?

Для примера будем делать кнопку для загрузки файлов.

Разметка примера с учетом доступности для людей с ограниченными возможностями

Нам понадобится только элемент , в который для решения проблем с доступностью можно добавить атрибут aria-label=»Download File» :

Если вы не хотите использовать пустой элемент, то можете использовать для решения проблемы с доступностью элемент с классом .sr-only , чтобы спрятать поясняющий текст от основных пользователей. Такой класс можно описать самостоятельно или использовать из какого-либо css-фреймворка.

Вы можете использовать атрибут aria-label для добавления значка к кнопке или скрытому элементу, читаемому только вспомогательными технологиями, — здесь выбор за вами. Используя элемент кнопки , мы уже решили первые три пункта нашего контрольного списка, поскольку он интерактивен, доступен с клавиатуры и доступен по умолчанию. Не требуется атрибут tabindex или код JavaScript, чтобы сделать этот элемент доступным с клавиатуры.

Настраиваем под себя

Итак, как мы можем изменить цвета, размеры, добавить градиенты, используя одно изображение SVG из нашего CSS? Ответ заключается в использование очень широко поддерживаемых свойств mask-* !

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

Давайте начнем добавлять базовый стиль к нашей кнопке, чтобы настроить позиционирование и блочную модель:

Теперь мы собираемся использовать псевдоэлемент ::before для добавления иконки. Псевдоэлемент с абсолютным позиционированием полезен для математического центрирования иконки, но в то же время он позволяет нам оптически центрировать иконку, когда нам это нужно. Стили:

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

Используя свойства группы mask- , мы можем установить нашу иконку, как маску элемента, так же, как мы это делаем с такими инструментами дизайна, как Sketch, Figma и другими. Давайте добавим эти свойства:

mask-image : url ( «https://cdn.glitch.com/a10b6199-a788-4cef-8bd8-21f95dbcba93%2Fdownload-cloud.svg?v=1571346192759» ) ;

Как видите, здесь мы определили четыре вещи:

• Свойство url маски: наша черная svg-иконка;
• Позиция маски: установить всегда по центру;
• Повторение маски: мы отключили эффект плитки (повторяемости).
• Размер маски: мы устанавливаем его так, чтобы он содержался в доступном пространстве, поэтому значок всегда будет полностью видимым.

Вы могли заметить, что эти свойства аналогичны (и действуют), как свойства группы background. Основное отличие заключается в том, что изображение используется в качестве маски и делает наш элемент «прозрачным» там, где изображение является черным, а белая (или прозрачная) часть изображения используется для скрытия того, что находится на фоне. Наш значок здесь белый, потому что мы установили background: #fff; на псевдоэлементе, а svg-иконка заполнена черным цветом #000 .

Поддержка браузерами свойств вида mask-

Свойства для формирования маски хорошо поддерживаются всеми современными браузерами:

Исключение составляют все версии IE, Opera Mini и US Browser для Android, а также некоторые другие браузеры, мало используемые в массе своей.

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

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

Первый результат применения SVG-маски

Теперь мы должны увидеть что-то вроде этого:

Таким образом, вы можете изменить фон, добавить градиенты и сделать значки затухающими, залив их градиентом от черного до прозрачного цвета.
Внутри mask-image вы также можете использовать значок из файла SVG-спрайта!

Источник