Кнопки CSS (с фоном, но нужен скос)
Ответы 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" />
Могу я узнать ваши аргументы в пользу верхнего регистра?
Вы можете использовать начало в стиле границы:
граница: отступ 2px #cccccc;
Я действительно хочу, чтобы он выглядел как браузер по умолчанию.
Для получения настоящего эффекта кнопки я также хотел бы добавить стиль наведения или фокуса. Подобно тому, что упомянул @Roburg, я обычно делаю что-то вроде:
input#button {
border: 2px outset rgb(0, 0, 0);
}
input#button:focus {
border: 2px inset rgb(0, 0, 0);
}
Это создаст иллюзию того, что кнопка была нажата, хотя сама по себе это не настоящая кнопка.
@Steve - да, это была опечатка по привычке - я обычно использую div вместо кнопок. спасибо за улов;)
Почему вы обычно используете div для кнопок? Это кажется ... бессмысленным.
Обычно для проблем с Ajax и стилем. Используйте div, обработчик событий JavaScript, стили CSS, а затем изящно вернитесь к стандартной кнопке ввода, если JavaScript отключен.
В моем старом магазине использовался синтаксис input type = "image" - он работает как Submit. Как любит говорить один из моих любимых игроков в покер: «Все, что ты можешь съесть, детка!» - все, что вы хотите поместить туда в виде графики.
Использование <.input type = "submit" /> с фоном будет выглядеть по-разному в зависимости от того, в каком браузере / ОС вы используете.
Если вы хотите сохранить стили браузера, вы можете использовать элемент кнопки, который позволяет HTML внутри тега:
<button type = "submit"><img src = "image.gif" /> Text</button>
or
<button type = "submit"><span class = "icon"></span> Text</button>
Извините, это не похоже на ту же кнопку (Firefox).