HTML-кнопки - наилучшая практика

Question

Предположим, у вас есть приложение, ориентированное на клиента, размещенное на веб-сервере. У вас нет контроля или знания клиента клиента. Вам также нужен привлекательный дизайн, но вы не хотите подавлять пользователя тяжелой графикой и/или навязчивым JavaScript.

У вас хорошая схема CSS с rounded corners, но серые кнопки по умолчанию выделяются как больной палец.

Я могу найти в Интернете примеры, например this, но я не вижу ничего, что помогло бы мне определить, подходит ли данное решение или существует ли лучший вариант.

С учетом этого, каковы ваши лучшие предложения по созданию привлекательных/используемых кнопок в HTML, которые работают или, по крайней мере, изящно деградируют среди различных браузеров/платформ?

Answer 1

кнопки JQuery UI

Я предлагаю вам взглянуть на кнопки JQuery UI, так как это один из самых популярных замен кнопки HTML там. Поскольку вы уже используете jQuery, это должен быть хороший выбор.

Jquery UI является

• обширно протестирован
• кросс-браузер совместимый
• Оптимизированные
• Высоко настраиваемый, с сервисом ThemeRoller

Ссылки

• http://jqueryui.com/demos/button/
• http://msdn.microsoft.com/en-us/scriptjunkie/ff756526.aspx

Answer 2

HTML обеспечивает интерактивные изображения кнопок. Попробуйте <input type="image" src="..." />.

Answer 3

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

<button class="form-submit" type="submit"><span>Inloggen</span></button> 

CSS:

.form-submit { clear: both; float:none; height:30px; color: #fff; overflow: visible; background: #fff url(../images/design/bg-buttons.png) no-repeat 100% 0; border:0 none; clear: both; cursor:pointer; font:bold 12px arial; padding:0 10px 0 0; margin:15px 0 0; text-align:center; } 
.form-submit span { padding:0; border:0; height:30px; background: #fff url(../images/design/bg-buttons.png) no-repeat 0 0; display:block; white-space:nowrap; padding:0 0 0 10px; text-shadow: 1px 1px 3px #000; line-height:30px; } 
.form-submit::-moz-focus-inner { border:0 none; padding:0; } 
.form-submit:hover { color: #ff0000; background-position: 100% -30px;} 
.form-submit:hover span{ background-position: 0 -30px; text-shadow: none;} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .form-submit span { position: relative; margin: -1px 0 0; left: -3px; } 
} 

CSS ie6

.form-submit span { margin: 0 0 -1px; } 
.form-submit.hover { color: #ff0000; background-position: 100% -30px;} 
.form-submit.hover span{ background-position: 0 -30px;} 

Пример можно посмотреть здесь (кнопка Войти)

http://www.oudstanding.nl/user/login