Класс для кнопки можно применять как для ссылки <a href="#" class="ob-button">Кнопка</a>, так и для input[submit] / input[button] / button
Все перечисленные элементы с данным классом будут иметь одинаковый стиль и отображаться одинаково во всех поддерживаемых браузерах.
Кнопки также поддерживают классы модификаторы, которые отвечают за изменение их внешнего вида на страницах.
<a class="ob-button" href="#">Button</a>
<input class="ob-button" type="submit" value="Button">
<button class="ob-button">Button</button>
Модификации кнопок по цветам
Для группировки кнопок по какому-либо признаку можно использовать модификаторы цветов .button-orange .button-red .button-cancel
<a class="ob-button button-orange" 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-red" href="#">Button</a>
<a class="ob-button button-cancel" href="#">Button</a>
</div>
<div class="ob-button-fixed-place"></div>