Как сделать круглую кнопку со значком по центру?
И мне нужно сделать ровный круг с иконкой ровно по центру
Уточню что некоторые иконки не симметричны и имеют не правильные пропорций
изо чего хоть программно они и находятся по центру но визуально нет и нужно как то их подвинуть
Я знаю что можно сделать так
a < color:#fff; background:#0f0; padding:10px; border-radius:100%; position:relative; font-size:40px >a:before
Но тогда придется при изменений padding или font-size постоянно подгонять top: и left: что мне не подходит.
Есть ли у кого идеи как сделать так что бы буква столовалась на том же месте относительно круга?
- Вопрос задан более трёх лет назад
- 1614 просмотров
Создание Bootstrap кнопок. Настройка цвета и размера
Кнопки — это один из самых распространённых элементов в дизайне сайтов и приложений. В большинстве случаев кнопки применяются для того, чтобы привлечь внимание посетителя сайта к действиям, которые они выполняют. Кнопки используются в HTML формах, диалоговых окнах, меню и во многих других местах веб-страниц.
Для оформления элемента в виде кнопки обычно используется , а также ссылки
Хорошей практикой является использование ссылок — для выполнения различных действий на странице.
Создание дефолтной Bootstrap кнопки осуществляется посредством добавления к тегу базового класса btn и класса с темой (например, btn-primary ).
В Bootstrap 3 нет темы secondary, light и dark, но есть default.
Outline кнопки (только Bootstrap ?пеж4)
Создание бутстрап кнопки с контуром (без фона) необходимо добавить к элементы классы btn и btn-outline-* :
Изменение размера кнопки
Для увеличения или уменьшения размера кнопки, к ней нужно дополнительно добавить класс btn-{size} . Вместо {size} необходимо указать lg , sm или xs (только в Bootstrap 3).
Класс btn-lg предназначен для создания большой кнопки, sm — маленькой и xs — очень маленькой.
Кнопка, занимающая всю ширину родительского элемента
Создание кнопки с шириной равной ширине родительского элемента осуществляется с помощью класса btn-block.
Активное состояние кнопки
Если необходимо отображать кнопку нажатой (с более тёмным фоном и рамкой), то к ней необходимо добавить класс active .
Для поддержки вспомогательных технологий к кнопке нужно добавить атрибут aria-pressed=»true» .
Неактивное состояние кнопки
Если необходимо отключить возможность нажатия на кнопку, то её необходимо перевести в неактивное состояние.
Для элемента button это действие осуществляется посредством добавления к нему атрибута disabled .
Для отключения функциональности кнопки, созданной с помощью элемента a , необходимо выполнить немного другое действие, а именно добавить к ней класс disabled .
Класс disabled отключает возможность клика по кнопке посредством установки ей (элементу a ) CSS-свойства pointer-events со значением none .
Для обеспечения поддержки вспомогательных технологий, таких как программ чтения с экрана, к кнопке (элементу a ) необходимо добавить атрибут aria-disabled = «true» .
Плагин Buttons
Компонент «Buttons» включает в себя не только CSS, но JavaScript. Данный код (buttons.js) добавляет на страницу функционал, предназначенный для управления состоянием кнопок, как отдельных, так и находящихся в группах.
Использование кнопки в качестве переключателя
Для создания кнопки-переключателя добавьте к ней атрибут data-toggle=»button» . После этого при нажатии на кнопку она будет переключаться из обычного состояния в активное и наоборот.
Если кнопка изначально должна находиться в активном состоянии, то к ней необходимо добавить класс active и aria-pressed=»true» .
Checkbox и radio кнопки
CSS-стили Buttons можно применить и к другим HTML элементам, таким как к label , чтобы создать checkbox или radio кнопки.
Атрибут data-toggle=»buttons» предназначен для JavaScript. Он используется в его коде в качестве селектора для выбора элементов, к которым необходимо добавить поведение «переключения».
Состояние кнопок обновляется через событие click . Если необходимо использовать какой-то другой способ для обновления состояния checkbox или radio кнопок , то его нужно написать самостоятельно.
Класс btn-group-toggle (Bootstrap 4) предназначен для стилизации элементов input внутри группы.
Методы плагина Buttons
В Bootstrap 3 и 4 версии имеется метод $().button(‘toggle’) . Он предназначен для программного переключения состояния одной или нескольких кнопок.
Например , создадим 2 кнопки, и с помощью одной кнопки будем переключать состояние другой:
. 
В Bootstrap 3 кроме вышеприведённого метода имеются ещё 2:
- $().button(‘string’) — изменяет текст кнопки на значение, хранящееся в атрибуте data-string-text (имя атрибута составляется путём сложения строки data- , строкового значения , переданного в функцию button, например string и строки -text );
- $().button(‘reset’) — заменяет текст на изначальный.
Пример работы с методами $().button(‘complete’) и $().button(‘reset’) .
. 
Этот пример состоит из 2 кнопок.
При нажатии на первую кнопку её текст изменяется на значение атрибута data-complete-text . Это действие выполняется с помощью метода $().button(‘complete’) .
При нажатии на вторую кнопку текст первой кнопки заменяется на изначальный. Осуществляется это посредством метода $().button(‘reset’) .
Выравнивание кнопки по центру
Кнопка в Bootstrap 3 и 4 по умолчанию отображается как inline-block . Это обстоятельство и определяет способы, с помощью которых её можно выровнять по центру.
Первый способ — это обернуть кнопку элементом , который показывается в документе как блочный (т.е. у которого CSS-свойство display , равно значению block ), и добавить к нему класс text-center .
Второй способ — это изменить отображение кнопки на блочное и добавить к ней стили margin-left: auto и margin-right: auto . В Boostrap 3 — это действие можно выполнить с помощью класса center-block , а в Bootstrap 4 — посредством классов d-block и mx-auto .
Выравнивание кнопки по левому или правому краю
Способы выравнивания кнопки по левому или правому краю в Bootstrap 3 и 4 показаны в нижеприведенных примерах.
Как создать круглую кнопку
Для создания круглой кнопки необходимо установить с помощью CSS ей одинаковую ширину и высоту. Радиус скругления в этом случае нужно задать, равный половине ширины или высоты.
.
Если необходимо содержимое кнопки расположить на нескольких строчках (например, иконку на одной, а текст на другой), то значение CSS свойства white-space необходимо сбросить или другими словами восстановить ему значение по умолчанию.
.
Как создать кнопку с иконкой
. 
. 