Красивые градиентные кнопки на CSS3 для всех браузеров


кнопки css - mozilla
Вчера мы рассматривали кнопки css как сделать красивые 3D кнопки при помощи CSS. Сегодня я Вам поведаю как еще можно сделать красивые градиентные кнопки и что бы отображались в разных браузерах  .  Для создания кнопок мы будет пользоваться свойства: border-radius, text-shadow,box-shadow и RGBA цвета.  Разметка и стили сделаны с использованием  graceful degradation, так что браузеры не поддерживающие указанные технологии, отобразят кнопки в рабочем нормальном виде, но не в таком хорошем качестве.

Кнопки будут иметь три состояния (обычное, наведение и нажатие), с  ними можно манипулировать и изменять свойства.

В этой статье вы увидите, как можно создать градиентные кнопки только с CSS (без изображения) .

 

HTML

Рассмотрим HTML для, например, синей кнопки:

Вложенный <span> используется для добавления текстуры и верхней белой границы

кнопки css

Верхнюю границу можно  сделать и с помощью inset box-shadow, но при этом кнопки не подходили бы под  graceful degradation. Ниже мы увидим  разницу.

CSS

С начала  сделаем общий стиль для всех кнопок  (класс button) :

 

Теперь давайте рассмотрим стили  отдельной кнопки на примере синей кнопки:

Другие кнопки можно сделать по аналогии, только заменяем значения на нужные цвета.

 

Поддержка браузерами

Mozilla Firefox 3.6+

Полная поддержка всех свойств, в том числе и паттернов:

кнопки css - mozilla

Webkit (Safari, Chrome)

Все отлично, так же поддерживаются все свойства:

Красивые градиентные кнопки без картинок Webkit (Safari, Chrome)

Opera 11

К сожалению, в Опере нет поддержки градиентов CSS и паттернов, но и при этом все остальное работает и кнопки смотрятся хорошо:

Красивые градиентные кнопки без картинок

IE 6–8

С помощью фильтров можно добавить градиенты к кнопкам:

Красивые градиентные кнопки без картинок IE 6–8

IE 9

Этот браузер поддерживает градиенты и тени, но с закругленными углами у него не все хорошо:

Красивые градиентные кнопки без картинок IE 9

 

Вот и все

Я надеюсь, Вам понравилась эта статья, не забывайте оставлять комментарии и следить за новыми постами!

Примеры кнопок


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

5 раз(а) написали о “Красивые градиентные кнопки на CSS3 для всех браузеров

  1. IE — в общем как и всегда имеет проблемы с отображением. Но всё-таки мучает вопрос, а нельзя никак в IE 9 сделать закругленные кнопки без графических дефектов на углах, или так или иначе они всегда будут отображаться так, как на скриншоте? Может есть возможность это как-то обойти?

    Ответить
    • К сожалению, нет. Вот такой не хороший IE.

      Ответить
    • Не понимаю, что люди никак не уйдут от этого ИЕ, пора бы уже переходить на другие браузеры mozilla, например. А сами кнопки классные, понравились

      Ответить
  2. Красавчик. Мне как раз нужны были кнопки и я собирался начать бороздить просторы интернета, но ты мне весь «кайф» испортил описав все здесь. Попробую сделать у себя чуть позже и дам оценку. Синяя кнопа мне подойдет

    Ответить
  3. Подтверждаю, кнопки работают chrome 25, opera 12(без клетчатой картинки поверх), firefox 12, iExplorer 7(квадратные и просто с синим градиентом). Спасибо Игорь. есть одна просьба, о ней напишу чуваку в нижнем правом углу.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.