Кнопка ввода с использованием раздвижных дверей CSS - PullRequest
Новая
       33

Кнопка ввода с использованием раздвижных дверей CSS

1 голос
/ 29 июня 2010

Разработанный специально для кнопок ввода, таких как <input type="submit" value="Button Name">, в этом стиле круглых кнопок используется техника раздвижные двери , собранная из одного изображения.

Демонстрация: Нажмите, чтобы просмотретьисходный код и демонстрационный код в действии
Демо: Нажмите, чтобы увидеть видео-демонстрацию стиля в браузерах Mac: Firefox, Safari, Chrome и Opera

ThisСтиль кнопки включает следующее:

  • Решает проблему с широкими кнопками для длинных имен кнопок для браузеров IE.
  • Устраняет проблему с браузерами IE, когда правая раздвижная дверь будет всплывать на страницекогда кнопка скрыта на стороне сервера.
  • Решает проблему фрагментированного текста для браузеров IE при прокрутке вниз, а затем назад на страницу.
  • Это идеальная альтернатива для дизайнеров, когда вы не можете использовать элемент управления ASP .Net, например <asp:Button id="b1" Text="Submit" runat="server" /> в вашем коде
  • Кросс-совместимость для сафари,т.е. Firefox, Chrome и Opera. смотреть видео

1 Ответ

3 голосов
/ 29 июня 2010

Я думаю, вам просто нужно поменять один псевдокласс. 

span.button input.form_button:hover {
  background-position:left -39px;
  color:#FFFFFF;
}

Должно быть 

span.button:hover input.form_button {
  background-position:left -39px;
  color:#FFFFFF;
}

Редактировать: это строка 52 демо-источника

...