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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание кнопок с помощью CSS3 | CSS | begenote