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

Как сделать — Кнопки значки

Добавить в библиотеку иконок, и добавить иконки для кнопок HTML:

Пример

<!— Добавить библиотеку иконок —>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Шаг 2) Добавить CSS:

Пример

/* Кнопки стиля */
.btn <
background-color: DodgerBlue; /* Синий фон */
border: none; /* Удалить границы */
color: white; /* Белый текст */
padding: 12px 16px; /* Немного отступов */
font-size: 16px; /* Установите размер шрифта */
cursor: pointer; /* Указатель мыши при наведении */
>

/* Более темный фон при наведении курсора мыши */
.btn:hover <
background-color: RoyalBlue;
>

Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.

Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

Кнопки соцсетей для сайта на чистом CSS

Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Посмотрите на моё решение — возможно это именно то что вы ищите.

youtube

Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

Кнопки социальных сетей

Набор круглых кнопок

Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

Начинается он с <div class. и заканчивается </div>

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

Надеюсь с вставкой HTML-кода кнопок разберётесь.

Ссылка на соц сеть

Теперь чтобы вставить ссылку на ваш профиль, канал или группу — нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.

Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

Код CSS

Первой строкой в данном css идёт подключение иконочного шрифта FontAwesome 4.7.0 через @import . Если FontAwesome уже подключен к вашему сайту, то удалите данную строку.

CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

Например:

Набор квадратных кнопок

Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

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

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

Несколько svg-иконок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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