Создать круглую кнопку в BS3

вы можете сделать что-то вроде добавление класса для добавления границы радиуса

HTML-код:

<a href="#" class="btn btn-default btn-circle"></a>

Усс:

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

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

(Не кросс-браузерное тестирование), но это мой ответ:

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}

• вертикально по центру через строку-высоту собственность
• обивка становится бесполезным и должен быть сброшен
• границы-радиус отдельной кнопки размер

Boostrap 3 имеет компонент для этого. Это'ы:

<span class="badge">100</span>

Это лучший справочник, используя шрифт-удивительным.

http://bootsnipp.com/snippets/featured/circle-button?

Усс:

    .btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;} 

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

<code>

<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>

</code>

Я имел такую же проблему и придумал очень простое решение Работа для всех (хз, см, нормального и LG) кнопок больше или меньше:

.btn-circle {
    border-radius: 50%;
    padding: 0.1em;
    width:1.8em;
}

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

Если вы скачали эти файлы локально, то вы можете изменить следующие классы в Bootstrap-социальной.в CSS, просто добавил границы-радиус: 50%;

.btn-social-icon.btn-lg{height:45px;width:45px;
   padding-left:0;padding-right:0; border-radius: 50%; }

А вот ТЭН в HTML

<a class="btn btn-social-icon btn-lg btn-twitter" >

</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">

</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">

</a>

Это работает для меня.

Использовать шрифт-удивительный ввиде иконок (альтернатива загрузчик значки). Вот несколько примеров: http://fontawesome.io/examples/

в

в <кнопка типа=на"глаз" (Клик)=С"сделать () и" класс="в цвет при наведении мыши-нет-фокус не-границы Альфа-стек Альфа-ЛГ" и> <I класс="в цвет-фокус Альфа-круг фа фа-стек-2х" и></а> <промежуток класс="в б-стек-1х" и>1</службы> < кнопка/> <соединение href="и https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" отн="в таблицу стилей, что"/>

 .no-border {
        border: none;
        background-color: white;
        outline: none;
        cursor: pointer;
    }
.color-no-focus {
        color: grey;
    }
  .hover:hover {
        color: blue;
    }
 .white {
        color: white;
    }

в

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

в

.btn-circle {
  border-radius: 50%;
}

Click Me!
?

в