Стандартная кнопка
Класс для кнопки можно применять как для ссылки, так и для
input[submit] /
input[button] /
button
Все перечисленные элементы с данным классом будут иметь одинаковый стиль и отображаться одинакого во всех поддерживаемых браузерах.
Кнопки также поддерживают классы модификаторы, которые отвечают за изменение их внешнего вида на страницах.
<a class="ob-button" href="#">Button</a>
<input class="ob-button" type="submit" value="Button">
Пример
Кнопки по умолчанию имеют 4 состояния -
normal /
hover /
active /
disabled
Модификации кнопок по цветам
Для группировки кнопок по какому-либо признаку можно использовать модификаторы цветов
.button-orange
.button-green
.button-red
.button-cancel
Так например, для кнопок формы можно использовать
.button-green
для подтверждения отправки и
.button-cancel
для отмены.
<a class="ob-button button-orange" href="#">Button</a>
<a class="ob-button button-green" href="#">Button</a>
<a class="ob-button button-red" href="#">Button</a>
<a class="ob-button button-cancel" href="#">Button</a>
Пример
Кнопка загрузки
Класс кнопки загрузки создает только визуальное оформление кнопки, а не функционал загрузки файла. Таким образом, Вы можете использовать данный класс для кнопок у которых уже есть функция загрузки, но нет соответсвующего стиля.
<a class="ob-button-attach" href="#">Upload button</a>
Пример
Фиксированные кнопки
Для отображения фиксированных кнопок (кнопок, прижатых к нижним границам страницы) необходимо использовать обвертку
.ob-button-fixed
в сочетании с дополнительным блоком
.ob-button-fixed-place
для резервации места на странице.
Данная конструкция будет полезна на страницах с большим количеством контента, с предпологаемым действием в конце. Кнопки будут всегда в области видимости, что облегчит пользование интерфейсом для пользователя.
<div class="ob-button-fixed">
<a class="ob-button button-orange" href="#">Button</a>
<a class="ob-button button-green" href="#">Button</a>
<a class="ob-button button-red" href="#">Button</a>
<a class="ob-button button-cancel" href="#">Button</a>
</div>
<div class="ob-button-fixed-place"></div>
Пример