Создание кнопки по типу submit

Добрый день. Вот возник вопрос, как верстальщики делают “правильные” кнопки для отправки данных ? через input=button как картинку, или ещё как ?
https://jsfiddle.net/BlackStar1991/rtLjLemd/
Я попробовал через input=button и мне не понравилось, серый прямоугольник растягивается на всю величину

Если это кнопка отправки формы, то только <input type="submit"> или <button type="submit">.

Мне это не подходит, по причине того что input сам рисует какуе-то свою серую область, и переназначение этой области стилями через CSS у меня не вышло. Оно просто не совмещается

Покажите, что там за область. Фон серый у кнопки не убирается или что?

Эмммм… ну так здесь. Хотя я вот сейчас перепроверил в Опере и Хроме область есть, а вот в Фаерфокс серого прямоугольника уже нету. Чудеса

background-color: transparent; - и проблема решена. А в настоящих проектах стили браузеров по умолчанию либо сбрасывают совсем (css reset) либо приводят к одинаковому виду (normalize).
Статья Академии в тему.

3 лайка

Спасибо, помогло.
А ещё вопросик, Что более правильно отрисовывать формы (кружки треугольники и тд.) через свойства CSS или добавлять их как картинки ?

По-разному делают… Я считаю, что если можно обойтись без картинки, то лучше обойтись.

ещё вопросик, по данной теме, а что делать если reset.css и normalize.css не срабатывают как надо? Если треугольник продолжает отображаться в обводе рамки кнопки ?

Исправлять вручную, переопределяя стили по умолчанию. Как и писала выше background-color: transparent; если фоновый цвет вам не нужен совсем или задаете свой, отличный от прозрачного.