CSS : Градиентные кнопки при помощи CSS
Написал MACTEP в 16.06.2011 1:00:00 ( 3502 прочтений )

Градиентные кнопки при помощи CSSОсновным элементом дизайна являются кнопки. Используя CSS3, можно создать неплохие кнопочки.  В данной статье будет рассказано, как сделатть кнопки различных размеров и цветов. А в качестве бонуса предлагаю оригинальную форму поиска  на CSS.



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

Кнопки выводим с помощью стилей. Воспользуемся возможностью наращивать стили.

Пример вывода кнопки:

<a class="button red bigr" href="#">Красный</a>

где button вывод кнопки, red - цвет кнопки (красный цвет), bigr - размер и форма кнопки (большая закругленная).

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

Или черная средняя кнопка:

<a class="button black medium" href="#">medium</a>

Черная средняя кнопка с градиентом

 

Таким образом, мы можем вывести любой размер и формат кнопки и любой ее цвет. Для отображения одной - двух кнопок не обязательно прикреплять все стили. Достаточно скопировать только те размеры и цвета, которые нам необходимы.

 

Вот примеры всех видов кнопок. Показаны картинки для того, чтобы видеть максимальные возможности CSS3, так как не все браузеры одинаково отображают эти кнопки. К примеру, в опере нет градиента, а в ИЕ нет закругления

 

Разные размеры (надпись на кнопке - примененный стиль)
Разный размер градиентных кнопок

 

Все цвета радуги...

Все цвета радуги градиентных кнопок

 

Разные элементы

Разные элементы

 

Ещё цвета...

Ещё несколько цветов...

 

И обещанный бонус. Форма поиска.

Форма поиска при помощи CSS


Теги: CSS   Кнопки   Градиент  
Предыдущая новость Следующая новость
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

4 пользователь(ей) активно (1 пользователь(ей) просматривают Web)

Участников: 0
Гостей: 4

далее...

Рекомендуем