MY SPELE
+380678383535
team@spele.ua

Кнопки

Класс для кнопки можно применять как для ссылки <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>