Правильно ли спозиционирована кнопка в форме?

Question

[pasha bpv]

Правильно ли я с позиционировал кнопку в форме?

.btn-checkout {
         display: block;
         width: 250px;
         margin: 20px 130px;
         font: bold 21px/47px @fontCustom;
      }

СКРИН -->

Answer 1

[Андрей Голуменов]

В принципе, все правильно, но я бы сделал так:
- отдельно пишем класс кнопки
- отдельно пишем класс, который позиционирует кнопку

<input type="submit" name="mybutton" value="Нажми меня" class="button-orange button-form1">

В button-orange указываем шрифты, цвет, всякие border-radius и прочее визуальное представление кнопки, а в button-form1 указываем размеры, отступы и другие элементы, которые позиционируют эту конкретную кнопку.
Таким образом, можно потом использывать класс button-orange в других кнопках, на других формах, задавая вторым классом позиционирования для конкретного места

Comments

[pasha bpv]

Спасибо за совет!!!

[Юрий Лобанов]

@Golumenov а если захотим красной кнопку сделать - будем класс новый писать button-red или переименовывать этот и соотв. менять разметку? А еще лучше - пусть будет красной, но называться orange?
Класс лучше обозвать button-callme, к примеру, или по аналогии с bootstrap getbootstrap.com/css/#buttons button-attention, не привязываясь к определенному свойству. Тот же бутстрап конечно использует large, small - но это оправдано только для ограниченного количество свойств.

[Андрей Голуменов]

@iiil В примере выше, я написал о идее разделить визуальную составляющую кнопки от позиционирования, с последующим использованием визуальной составляющей в других формах.
И да, с вами соглашусь по поводу наименования классов. Лучше использовать следующую логику при названии классов: "тип элемента-что он делает[-где это делает]", например button-submit или button-apply-item-filter

[Юрий Лобанов]

@Golumenov ну насчет разделения я и не спорю. Только насчет класса orange.

Answer 2

[Илья Казначеев]

Нет, кнопка лучше будет смотреться посередине или на всю ширину.
И на кнопке должен быть призыв к действию, а у Вас больше на секс по телефону походит (:

Лучше так:



А еще лучше так:



Вот хороший мануал, как сделать мир форм лучше: goodui.org
на хабре есть перевод, если что

Comments

[pasha bpv]

ok! Спасибо!

[Илья Казначеев]

@pahann всегда вэлкам

[Иван]

не нашел перевод, можно ссылку?

[pasha bpv]

так вот на хабре есть habrahabr.ru/company/UXDepot/blog/217455

[pasha bpv]

и вот habrahabr.ru/company/adv/blog/186846

Answer 3

[pasha bpv]

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

Answer 4

[anlamas]

может вы имели ввиду, правильно ли вы сверстали кнопку?

Comments

[pasha bpv]

Извиняюсь за не правильно поставленный вопрос, именно позиция кнопки..

[anlamas]

вам нужно создать структуру в виде таблицы, то есть 3х2: в первом столбце текст, но ячейка 3х1 не содержит ничего, а второй столбец содержит input теги