Строчная кнопка как кнопка submit
Требуется создать строчную кнопку submit неопределённой ширины с фоновой картинкой.
Почему это нельзя сделать стандартными средствами? Т. е. мы конечно можем поместить на страницу кнопку
и спокойно её использовать. Но нет, нам же этого мало. Нужно чтобы кнопочка была красивая, градиентная, с закруглёнными уголками.
Стандартным способом мы можем указать фон для кнопки, добавить рамочку и в браузерах FF и Safari добавить закругления. Но проблема в том, что это во-первых не будет работать в IE и Opera, а во вторых, размеры кнопочек, положение текста и отступы везде будут разные.
В FF2 вообще фон вылез за край закруглений.
Можно попробовать поместить кнопку submit в элемент span, чтобы использовать метод Sliding Doors. В этом случае можно будет без проблем поставить в качестве фона картинки как для элемента «span», так и для элемента «input». Но к сожалению и этот способ не подойдёт, поскольку нет возможности адекватно выровнять текст по вертикали.
Поэтому если визуальное представление гораздо важнее чистоты html-кода, то можно воспользоваться следующим методом.
Двойной «span» и элемент «input»
За основу возьмём статью о создании кнопки как ссылки. Поскольку в данном случае ссылка нам не нужна, то мы её заменяем на span, а внутрь второго span-а помещаем кнопку submit:
Принцип Sliding Doors сохраняется и картинки кнопки помещаются в эти два span-а. Не забываем и про то, что кнопка должна быть уровня inline-block.
.input-button {
display: -moz-inline-box; /* только для FF2 */
display: inline-block;
height: 20px;
vertical-align: bottom;
*vertical-align: middle; /* только для IE */
background: #83af31 url(button-r.gif) no-repeat right top;
cursor: pointer;
}
.input-button span {
display: block;
_display: inline-block; /* только для IE6 */
line-height: 20px;
padding: 0 10px;
height: 100%;
color: #fff;
background: url(button-l.gif) no-repeat left top;
overflow: hidden;
position: relative;
}
С кнопкой submit мы сделаем хитро. Разместим кнопку с абсолютным позиционированием относительно span-а поверх текста и сделаем её прозрачной. В итоге мы получим красивую кнопку с возможностями элемента «submit», ширина которой варьируется относительно текста помещённого внутрь.
Можно сделать размер больше, как изображено на картинке, но можно и 100% высоту и ширину. Код следующий:
.input-button input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
opacity: 0;
-moz-opacity: 0; /* видимо для старых версий FF */
filter: alpha(opacity=0); /* только для IE */
}
Все методы представлены в этом архиве.
]]>Octane]]>Чтобы выровнять текст по вертикали в кнопке, нужно зафиксировать высоту, задать такую же высоту строки и подобрать нижний padding.
»Пример
]]>Никита]]>Octane, спасибо, не знал о нижнем паддинге.
Ваш пример хорош, правда есть несколько недоработок:
1. В Safari справа лишний кусок кнопки торчит
2. В FF2 левая часть на одной строчке, а правая съехала на вторую строчку.
3. Левая часть (10px до надписи) не работает при клике.
Доработайте, и я добавлю ваш вариант в статью.
»]]>Octane]]>Немного подправил пример.
»Теперь нормально отображается в Firefox 2.
Про нерабочую область в 10px, ведь кнопка скорее всего будет обрабатываться средствами JavaScript и ничто не мешает «повесить» обработчик события на родительский <SPAN> и пользоваться эффектом всплывания событий.
В Safari 3 сейчас нет возможности проверить пример
]]>Octane]]>Нашел, наконец, рабочую версию Safari 3.2 Portable, поправил пример, надо было margin у button убрать.
Архив с примером | Скриншоты
»]]>Никита]]>Octane, спасибо, всё хорошо, но осталась проблема с нерабочей областью слева. «Допиливание» при помощи JavaScript — не наш метод. Может всё-таки как-то решить средствами CSS?
»]]>Octane]]>Только средствами CSS в данном примере наверное не решить проблему, придется добавить еще один элемент, а такой вариант уже описан в статье. Да и чем так мешает эта десятипиксельная некликабельная без JavaScript область? При управлении с клавиатуры, кнопка в любом случае получит фокус ввода. И даже при отключенном JavaScript большая часть кнопки остается рабочей, надо просто оформить состояние :active, чтобы видеть, что кнопка была нажата. Я думаю процент людей, использующих браузеры с отключенным JavaScript, которые попадут на эту некликабельную десятипиксельную область, пренебрежимо мал.
В моем способе, с одним изображение, больший недостаток — нужно заранее знать на каком фоне будет кнопка.
>> «Допиливание» при помощи JavaScript — не наш метод.
expression и behavior для IE и есть JavaScript! А тут всего-лишь продублировать событие click для всех браузеров надо…
»Еще как наш
]]>Octane]]>Кстати, пробовал сделать наоборот, т.е. положить span внутрь button:
<button type="submit"><span>Кнопка</span></button>
тогда бы все было замечательно, НО вот Firefox победить не удалось
появляются какие-то неустранимые отступы внутрь button’а слева и справа…
»]]>Никита]]>Хм. Интересно. Кстати, я button не рассматриваю. Это должен быть input type=”submit” иначе форма без js не сработает.
»]]>Octane]]>А что мешает написать: <button type="submit">…</button>?
»]]>nobel]]>Кстати, о форме кнопки. Не с любым шрифтом вариант с закругленными концами будет выглядеть гармонично. Например, с “arial”, более удачным, на мой взгляд будет остроугольный вариант.
»Octane, за нижний паддинг спасибки.)
]]>Никита]]>Octane, в HTML-формах принято использовать input type=”submit”.
«If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.»
http://www.w3schools.com/tags/tag_button.asp
nobel, по-моему речь шла не о том, какого вида кнопку сделать и уж тем более не о шрифтах.
»]]>nobel]]>Никита, разумется, я заметил, что тема начиналась с фона для кнопки. Но там еще добавлено про “закругленные уголки”. Так вот я о том, что для некоторых шрифтов заморачиваться закруглением в коде не стоит, потому как …. – описал выше. Тогда, например, в FF2 все будет нормально отображаться.
»]]>Никита]]>nobel, речь идёт не о дизайне кнопок, а о вёрстке кнопок с использованием эффекта Sliding Doors. Фоновая картинка и закруглённые уголки, это всего лишь пример. Я вас очень прошу, пишите комментарии по теме.
»]]>Статьи об HTML, CSS, доступности и юзабилити » » Вебдайджест — 27.03.09]]>[...] Строчная кнопка как кнопка submit (Seleckis.lv) — пример создания строчной кнопки submit неопределённой ширины с фоновой картинкой. [...]
»]]>erema]]>Я предпочел button, правую часть кнопки вставляю через button:after (для IE 6-7 – одноразовый expression, вставляющий span), что касается FF – то баг с неубираемыми пэддингами известен, https://bugzilla.mozilla.org/show_bug.cgi?id=140562
Там же есть решение:
»button::-moz-focus-inner {padding:0; border:0;}
]]>peter]]>Наконец нашёл! Вот за это спасибо! Подпишусь на рсс
»