Кнопки бутстрап

Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.

кнопки

  Как быстро вставлять кнопки используя CSS-классы бутстрапа.

  Бесспорно, в применении кнопки из CSS стилей в много-много раз лучше кнопок сделанных из изображений. При загрузке браузером страницы сайта, они не создают дополнительных запросов к серверу, а вес кнопок более чем в тысячу раз легче самой маленькой по размеру картинки кнопки.

Стандартные кнопки

Чтобы создать кнопку, нам нам необходимо применить к элементу стиль с классом .btn. Применять данный стиль можно к любому элементу, но чаще всего стиль кнопки натягивают на ссылку, то есть элементы тега <a>

Кнопки

HTML-код кнопок с классами Bootstrap

<button type="button" class="btn btn-primary">Главный</button>
<button type="button" class="btn btn-secondary">Вторичный</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-info">Инфо</button>
<button type="button" class="btn btn-light">Светлый</button>
<button type="button" class="btn btn-dark">Темный</button>

<button type="button" class="btn btn-link">Кнопка ссылка</button>

 

Кнопки из разных элементов

Ссылка

<a class="btn btn-primary" href="#" role="button">Ссылка</a>
<button class="btn btn-primary" type="submit">Кнопка</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

 

Кнопки без фона (контурные)

HTML-код:

<button type="button" class="btn btn-outline-primary">Главный</button>
<button type="button" class="btn btn-outline-secondary">Вторичный</button>
<button type="button" class="btn btn-outline-success">Успех</button>
<button type="button" class="btn btn-outline-danger">Опасность</button>
<button type="button" class="btn btn-outline-warning">Предупреждение</button>
<button type="button" class="btn btn-outline-info">Инфо</button>
<button type="button" class="btn btn-outline-light">Светлый</button>
<button type="button" class="btn btn-outline-dark">Темный</button>

 

Размеры кнопок

Если нужно изменить размер кнопки, ей добавляют классы .btn-lg или .btn-sm

<button type="button" class="btn btn-primary btn-lg">Большая кнопка</button>
<button type="button" class="btn btn-secondary btn-lg">Большая кнопка</button>

 

<button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>
<button type="button" class="btn btn-secondary btn-sm">Маленькая кнопка</button>

 

Чтобы кнопка была размером на всю ширину блока, ей добавляют класс .btn-block

<button type="button" class="btn btn-primary btn-lg btn-block">Блочная кнопка</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Блочная кнопка</button>

 

Записи по теме
3D кнопки для сайта
кнопки Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом.
Кнопки соцсетей для сайта на чистом CSS
youtube Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Взгляните на моё решение - возможно это именно то что вы ищите.

 

 

Комментарии 0

*** чтобы писать комментарии.