Самое надежное решение для CSS-кнопок?

Question

Какое самое лучшее и надежное определение CSS-кнопок?

В идеале мне бы хотелось, чтобы градиенты, округленные изображения и плавная деградация были до IE8. Было бы также хорошо, если бы кнопки не использовали изображения, а кнопки масштабировались горизонтально, чтобы соответствовать их содержанию.

Какое лучшее решение для этого?

Answer 1

Используйте инструменты на http://css -tricks.com / examples / ButtonMaker

Answer 2

Это - это можно использовать градиенты, box-shadow, border-radius, rgba color и так далее в более старых версиях Internet Explorer, используя CSS3 пирог . Посмотрите их демо со всеми этими свойствами CSS3.

Теперь, объедините CSS3 PIE с создателем кнопки , упомянутым в комментариях, и все готово!

Answer 3

Огромный поклонник кнопок пользовательского интерфейса JQuery.Демо-версия здесь

Да, они используют некоторые изображения ... но изображения также являются общими для многих других функций пользовательского интерфейса JQuery, который предлагает вашей странице некоторые удивительные функции (и многое другое).приходит все время) Это изящно ухудшается, и вы можете расширить его до раунда в IE с помощью другого плагина JQuery.Моя любимая часть - ThemeRoller, которая позволяет создавать страницы с помощью плагинов, способных к themeroller, а затем стилизовать или изменять их по желанию, даже с помощью инструмента, плавающего над сайтом.Вы можете легко включить способ для пользователя переключать всю тему сайта одним нажатием кнопки.Кроме того, есть редактор, который позволяет легко создавать свои собственные темы, если вам не нравится то, что там есть.

Что касается градиентов, у вас есть постепенное увеличение, уменьшение, изогнутые изменения, шаблоны, а затем "создание собственных"варианты с вариациями этих и более, плюс цветовые наложения и прозрачность.

Настроить кнопку так же просто, как: <button class="ui-state-default ui-corner-all" type="submit">Button</button>

Answer 4

Нет способа сделать то, что вы просите, только с помощью CSS, поскольку градиенты и углы были добавлены только с CSS3, и даже сейчас они все еще не полностью поддерживаются.

Лучший способ достижения градиентовТеперь нужно использовать реальное изображение, тогда вы можете быть уверены, что большинство, если не все браузеры, будут поддерживать его (если вы используете изображение .png, IE6 может иметь проблему с ним, но есть CSS-хаки, чтобы обойти его).

Закругленные углы могут быть добавлены на сайт двумя различными способами:

• Первый - с помощью изображений, и вы разместите их по углам элемента, придав округлому виду.То, что я сказал ранее об изображениях .png, все еще применимо здесь.
• Второй способ - использовать JavaScript.Большинство фреймворков будут иметь плагины, разработанные с учетом функций Web 2.0.Я рекомендую jQuery, поскольку его легко реализовать.

Из двух вышеупомянутых методов предпочтителен первый, если вы хотите быть абсолютно уверены, что пользователи могут видеть кривые, однако если вы не слишкомобеспокоенный тем, что у них отключен JavaScript, я бы определенно использовал jQuery, поскольку он в 100 раз проще в использовании.