Содержание:
CSS генератор Bootstrap кнопки
Этот инструмент позволяет очень просто создать кнопку с нужным оформлением для Bootstrap 3.
Процесс создания кнопки состоит из:
- выбора стиля кнопки (default, modern или outline);
- ввода имени (класса кнопки);
- настройки цвета и радиуса скругления.
Параметр default создаёт оформление кнопки в стиле Bootstrap 3.
Увидеть действия параметров можно сразу в разделе "Вид кнопки" (в её различных состояниях).
Установка кнопки на сайт
После настройки стиля кнопки, скопируйте представленный ниже CSS код на страницу или в свой файл CSS (подключённый ниже bootstrap.css).
Процесс добавления кнопки на страницу будет осуществляться следующим образом:
<!-- Вместо класса btn-sample необходимо указать тот, который вы задали кнопки в разделе "Настройки кнопки" --> <!-- Обычная кнопка --> <button class="btn btn-sample">Обычная кнопка</button> <!-- Кнопка к которой добавлен класс active --> <button class="btn active btn-sample">Active</button> <!-- Кнопка к которой добавлен класс disabled --> <button class="btn disabled btn-sample">Disabled</button>
Если вы не используете Bootstrap 3, то для добавления данной кнопки на страницы сайта необходим дополнительно добавить ещё следующий CSS:
/* базовый CSS кнопки */ .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus, .btn.focus { color: #333; text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } /* сюда необходимо поместить сгенерированный CSS кнопки */
Вид кнопки
Комментарии: 1
Отлично!