Как добавить внутрь кнопки изображение?

Question

[Владимир Голубь]

Есть кнопка

<input type="submit" id="orderDesignButton" name="orderDesignButton" value="Далее">

Вот ее стили. Как добавить изображение внутрь кнопки сохранив при этом фоновый цвет? :after и :before пробывал не работает.

#orderDesignButton {
    width: 118px;
    height: 48px;
    border: 0;
    color: #ffffff;
    background-color: #00a6e8;
    font-size: 15px;
    margin-top: 20px;
    margin-left: 310px;
}

Comments

[Евгений Петров]

ПробОвал

Answer 1

[Евгений Петров]

Кнопки давно уже выгодно размещать с помощью button — именно для кнопок этот тэг и был введён.
Вот тогда и :after, и :before вам помогут, и url() останется.
Ну и не забудьте для Firefox:

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

Answer 2

[holfza]

background-image: url(...)

Comments

[Владимир Голубь]

тогда слетает фон ...

[holfza]

скиньте картинки, если не сложно

[Владимир Голубь]

holfza: я вот этим способом выполнил задачу background: url(...) no-repeat center #00a6e8;

Answer 3

[Ден и Ната]

background: url(...) no-repeat center #00a6e8;