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

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

 

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

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

  Почти во всех шаблонах joomla 3 используется фреймворк бутстрап.

Кнопка Класс Описание

 

 Кнопка  Код  Описание
btn Обычная стандартная серая кнопка
btn btn-primary Синяя сильно заметная и выделяющаяся кнопка, используется для обозначения основного действия
btn btn-info Используют как альтернативу стандартной кнопке по умолчанию
btn btn-success Обозначает позитивное действие или успешное выполнение
btn btn-warning Как правило, оранжевый цвет используется для предупреждений
btn btn-danger Обычно применяют для обозначения ошибок или каких либо негативных действий
btn btn-inverse Альтернативная кнопка тёмного цвета
btn btn-link Позволяет обратить кнопку в ссылку по стилю, при этом сохраняя весь функционал элемента

 Всё тоже самое, только уже в HTML

<!-- Стандартная кнопка -->
<button type="button" class="btn btn-default">По умолчанию</button>

<!-- Синяя основная кнопка -->
<button type="button" class="btn btn-primary">Основная</button>

<!-- Зелёная кнопка -->
<button type="button" class="btn btn-success">Зелёненькая</button>

<!-- Инфо-кнопка -->
<button type="button" class="btn btn-info">Инфо-кнопка</button>

<!-- Оранжевая кнопка -->
<button type="button" class="btn btn-warning">Оранжевая</button>

<!-- Красная кнопка -->
<button type="button" class="btn btn-danger">Красная</button>

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

button

 

Ссылка

 

 

Комментарии  

Константин
# Константин 23.08.2017 21:36
Спасибо. полезный материал. сохраню для себя. очень неплохо у Вас организована структура материалов на сайте сайта. все нужное разбито по категориям. возьму такой способ организации информации на заметку при создании своего будущего сайта. было бы неплохо если бы Вы написали что-нибудь про бустрап - отдельный раздел)
Ответить | Ответить с цитатой | Цитировать

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

Для того чтобы ваши комментарии появлялись мгновенно (без модерации), авторизируйтесь или пройдите регистрацию на сайте. Комментарии добавленные анонимно добавляются только после модерации, из-за большого количества спама.

Защитный код
Обновить

Авторизация

Войти через соцсети: