Input vs. Button
Ниже приведен перевод статьи от :
www.trevordavis.net
Прежде чем делать дизайн кнопок форм в виде изображений, стоит подумать все же о реализации этой затеи только с помощью CSS. В противном случае, представьте, сколько картинок для кнопок вам придется прописывать в коде. Думаете не много? Тогда посмотрим, с какими еще проблемами вы можете столкнуться, и как мы их будем решать.
Есть несколько вариантов решения нашей задачи:
1. Использовать <input type="submit" /> и технику замены картинки текстом.
2. Использовать <input type="image" /> и прописывать для каждой кнопки соответствующий путь к изображению.
3. Использовать <button type="submit"></button> и вставить код картинки между тегом button.
Если начать с варианта 2, то проблем не возникнет до тех пор, пока мы не протестируем код в IE 6/7. Если немного «погуглить», то можно обнаружить, что проблема эта давно известная и решается довольно просто с помощью JS. Однако все же хочется обойтись без него.. Поэтому перейдем к способу 3.
И снова все везде работает замечательно, кроме IE. Проблема в том, что браузер не воспринимает код картинки как фон для button. Причина скорее всего в том, что если у вас есть несколько элементов кнопок с одноименным названием атрибутов, то браузер IE6 реагирует только на те элементы, которые были отданы сервером в последнюю очередь.
Наглядные примеры всех 3х вариантов кнопок можно посмотреть . Просто откройте страницу в IE6/7 и вы увидите описанные мною проблемы.
Убедившись, что оба варианта работают изначально некорректно, придется обратиться к нашему 1му способу: просто прописывать стили для <input type="submit" />.
Напишем класс, который будем назначать для всех кнопок:
input.buttons {
background: none no-repeat top left;
border: none;
cursor: pointer;
display: block;
height: 25px;
overflow: hidden;
padding: 0;
margin: 0 2px 0 0;
text-indent: -9999px;
width: auto;
}
Теперь для каждой кнопки пропишем стили отвечающее за фоновое изображние и размеры:
input.updateCart { background-image: url(update-cart.gif); width: 107px; }
input.continueShopping { background-image: url(continue-shopping.gif); width: 146px; }
input.proceedCheckout { background-image: url(proceed-to-checkout.gif); width: 156px; }
Мы будем менять изображения на основе CSS спрайтов, поэтому мы зададим для кнопок правила для момента наведения курсором:
input.buttons:hover { background-position: 0 -25px; }
Смотрится замечательно, :
Но ошибка легко исправима, достаточно прописать следующие правила:
input.buttons { font-size: 0; line-height: 25px}
Результат можно посмотреть . Все работает корректно!
И еще один штрих..
Мы добились того, чтобы во всех браузерах кнопки отображались корректно. Однако нерабочим остается hover эффект в IE6. Предлагаю исправить это с помощью небольшого когда на jQuery:
$(document).ready(function(){
$('input.buttons').hover(function() {
$(this).css('background-position','0 -25px');
},
function() {
$(this).css('background-position','0 0');
}
);
});
Что ж, вариантов больше не осталось и нам пришлось использовать стандартный вариант с <input type=”submit”>. Если у вас есть более изящные решения – предлагайте :)
Dmoz
Вместо $(this).css(‘background-position’, …) лучше использовать $(this).toggleClass( ‘Hover’ )
Цитировать
Спасибо, очень помогла статья.
Цитировать
Все на хабре пишут, а тут нет( спасибо
Цитировать
upd
А все потому что тут кармы нет, и плюс никто не воткнет, а ведь круче когда сеть как небольшая кофейня, в которую ходишь каждое утро…
короче social владеет общим сознанием, а может и подсознанием, а мож и еще чем… брр…
а потеме: могу только повторить, что без вас я как без рук)
Цитировать
Спасибо ;) Приятно, когда тебя начинают цитировать :)
Цитировать
всегда пожалуйсто)
Цитировать
Черт, а как втавит сюда хтмл? Я хотел свой пример даст
Цитировать
для вставки кода используйте тег <pre> </pre>
Цитировать
Странно очень, отпиши мне на почту, я отредактирую коммент. webmaster(dog)getincss.ru
Цитировать
Ааа понятно. Извините за тест
значит так
<input type=”hidden” name=”submit” value=”Update card”>
<input type=”image” src=”update-card.gif” value=”Update card”>
вот так. И у нас появится кнопка с рисунком и правилно будет посылаться данные.
Цитировать
В Опере кнопки криво выглядят. Opera 9.26.
Цитировать
автор дай на мне на мыло полный текст в css и в html как вставлять. сижу туплю, только стандартная кнопка появляется а мои нет. хотя вроде все правильно прописал везде. заранее спасибо
Цитировать
Скажите,как сделать такие кнопочки на сайте.Точнее,где взять их gif файлы,чтобы отредактировать и поставить се на сайт?
Цитировать
Например с сайта оригинала –
Цитировать
Хорошо,я сделал 2 gif кнопки,обычная и нажатая.Как мне теперь правильно прописать пути,чтобы они у меня отображались?
Цитировать
Допустим у вас есть кнопка:
Тогда в CSS файле надо прописать следующее:
input.mybutton { background-image: url(ваш_путь_до_картинки); width: 100px; /*укажите нужную ширину*/ } input.mybutton:hover { background-image: url(ваш_путь_до_картинки_нажатой); width: 100px; /*укажите нужную ширину*/ }Почему бы вам не разобраться в исходном коде на странице, которую я вам выше давала?
Цитировать
Спасибо за статью. Но в Опере < 9.27 видно текст на кнопке:(
Цитировать
2 Никита Козин:
«css» медленнее работает, чем «add/removeClass»?
Цитировать
Спасибо за материал.
Цитировать