Совсем ненедавно, чтобы сделать красивые кнопки с градиентом и закругленными углами, приходилось прибегать к помощи JavaScript или достаточно громоздким трюкам CSS.

С помощью CSS3 очень просто сделать красивые и элегантные кнопки без использования дополнительных инструментов, которые будут работать во всех современных браузерах.

Рассмотрим создание стилизованных кнопок на CSS с минимальной разметкой и без использования изображений.

1. Разметка HTML

<button class="blue">Click here</button>

2. Базовый набор CSS-правил

button {
    background: #2e8ce3;
    padding: 7px 30px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border: solid 1px #73c8f0;
}

На данном этапе кнопка будет выглядеть следующим образом:

[bnote]Внешний вид кнопки до стилизации свойствами CSS3[/bnote]

3. Добавление градиента

background: -moz-linear-gradient(0% 100% 90deg, #2e8ce3, #73c2fd);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73c2fd), to(#2e8ce3));

С помощью правил выше мы добавили градиент для браузеров на движке Mozilla и Webkit.

Внешний вид кнопки с линейным градиентом

4. Закругление углов

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

С помощью этих правил мы создали закругленные углы, которые понимают все современные браузеры.

Кнопка с закругленными углами

5. Внутренняя тень

box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;

Правила выше делают кнопку более объемной путем добавления внутренней полоски толщиной 1px и белого цвета в верхней ее части.

Для контраста сделаем нижнюю границу кнопки более темной:

border-bottom-color: #196ebb;

[bnote]Кнопка с тенью[/bnote]

6. Тень для текста

text-shadow: 0 -1px 0 #196ebb;

Данное правило добавит тень для текста кнопки, что сделает ее более выразительной.

Окончательный вид кнопки

Предпросмотр
Скачать исходники
Автор идеи