Давайте пройдем через все шаги, которые нужно проделать, чтобы обычная кнопка превратилась в прекрасную сияющую кнопку, которая показана справа на рис. 6.09.

Рис. 6.09. Слева – вид кнопки по умолчанию (в Safari); справа – кнопка, оформленная средствами CSS3. Никаких изображений!

Сначала добавим поля, сменим шрифт на Helvetica, чтобы кнопка сочеталась с остальными элементами дизайна, уберем обводку и выставим белый цвет фона.

То, что получилось после применения этих простых стилей, показано на рис. 6.10. Уже есть что-то сильно отличающееся от кнопки по умолчанию.

Рис. 6.10. Кнопка, с которой убраны обводка и фон по умолчанию

Теперь добавим свойство border-radius, чтобы скруглить углы кнопки (рис. 6.11).

Рис. 6.11. Скругление углов кнопки свойством border-radius

Поэкспериментировав с разными значениями, мы остановились на радиусе в

.

Теперь применим линейный градиент с переходом цвета от светло-серого (

) к белому (), снизу вверх. Мы вновь воспользуемся инструментом Оллсоппа, чтобы получить верный код для Safari, Chrome и Firefox.

На рис. 6.12 показан полученный результат – так, как его отображает Safari. Теперь у нас есть кнопка со скругленными углами и градиентом. До сих пор не было использовано ни одного изображения и мы добавили лишь несколько строк кода в стилевой файл.

< image l:href="#"/>

Рис. 6.12. К кнопке применен CSS-градиент

Теперь добавим почти белую тень под текстом, которая создаст эффект того, что текст вдавлен в кнопку.