Кнопки CSS (с фоном, но нуждаются в скосе)

Question

<input type="submit"/>

<style>
input {
  background: url(tick.png) bottom left no-repeat;
  padding-left: 18px;
}
</style>

Но скос исчезает, как я могу добавить значок для кнопки отправки и сохранить скос?
Изменить: я хочу, чтобы он выглядел как браузер по умолчанию.

Answer 1

Использование <.input type = "submit" /> с фоном будет выглядеть по-разному в зависимости от того, в каком браузере / операционной системе вы находитесь.

Если вы хотите сохранить стили браузера, вы можете использовать элемент button, который позволяет HTML внутри тега:

<button type="submit"><img src="image.gif" /> Text</button>
or 
<button type="submit"><span class="icon"></span> Text</button>

Answer 2

Мой старый магазин раньше качал синтаксис input type = "image" - он работает как Submit. Как один из моих любимых людей в покер любит говорить: «Все, что ты можешь есть, детка!» - все, что вы хотите поместить в качестве графики.

Answer 3

Вы можете использовать отступ в стиле границы:

border: 2px outset #cccccc;

Answer 4

Для эффекта настоящей кнопки я также хотел бы ввести стиль наведения или фокусировки. Подобно тому, что упоминал @Roburg, я обычно делаю что-то вроде:

input#button {
    border: 2px outset rgb(0, 0, 0);
}

input#button:focus {
    border: 2px inset rgb(0, 0, 0);
}

Это создаст иллюзию, что кнопка была нажата, хотя сама по себе она не является настоящей.

Answer 5

Использовать границу. Например:

INPUT.button {
    BORDER-RIGHT: #999999 1px solid;
    BORDER-TOP: #999999 1px solid;
    FONT-SIZE: 11px;
    BACKGROUND: url(tick.png) bottom left no-repeat;
    BORDER-LEFT: #999999 1px solid;
    CURSOR: pointer;
    COLOR: #333333;
    BORDER-BOTTOM: #999999 1px solid
}

<input type="submit" class="button" />