Красивые кнопки CSS + 3 стиля и 6 цветов | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКрасивые кнопки CSS 3D + 3 стиля и 6 цветов
Дата: 17.05.2013 в 00:06 | Просмотров: 29282

Красивые кнопки CSS 3D + 3 стиля и 6 цветов

красивые кнопки css
Скачатьбесплатно с сервера
Демодемонстрация

Красивые кнопки css – это то, что нужно практически любому сайту. Эта мини-коллекция состоит из 43 кнопок, 3 разных стиля и 6 разных цветов. Ко всему этому, будет применено использование использование шрифта иконок. CSS создание кнопки имеет важное значение, поэтому предлагаю прочитать этот урок и посмотреть демо примеры по ссылке выше. Также обязательно посмотрите 3D кнопки для сайта от классного дизайнера Орман Кларка.

Шрифт и кнопки

Я использую Даниэль Брюса шрифт WebFont для иконок на кнопке, и мы конечно не используем все доступные в шрифте изображения, но эти 43 самые распространенные. Кроме них, также будет создано 3 разных стиля: вид 3D, прямоугольные и овальные. Также есть 6 цветов: оранжевый, пурпурный, голубой, красный, черный и зеленый. Вот некоторые из них:

красивые css кнопки, 3 стиля

Эти кнопки имеют 3 вида внешнего состояния: обычный, при наведении (hover) и активации (active).

создание кнопки css в 3-х состояних

Особенности

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

  • Нет изображения, все кнопки выведены с помощью CSS и шрифта;
  • Использование анимации при изменении состояния кнопки;
  • Гибкая настройка, Вы можете выбрать или даже изменить размер кнопки, её стилб;
  • Любой элемент может быть применен (a, button, span, div, input и т.д.).

Использование кнопок

Подключите файл стилей pictogram-button.css и загрузите папку font/ в нужное место. Есть два элемента, которые должны присутствовать – первый любой элемент в качестве обертки, а второй тег span.

Структура кнопки: первое, это стиль – 3D(button-bever), прямоугольник (button) или овальная кнопка (button-rounded). Далее после этого, идет цвет. Для тега span задается иконка через подключенный нами раннее шрифт. Вот примерная схема структуры кноппи:

создание кнопки css

На этом пока что все. Скачивайте исходные файлы, и пользуйтесь. Спасибо, что дочитали до конца!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com/2012/05/css3-pictogram-button/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Андрей:
      http://sat-master.org/ @

      Здравствуйте! Спасибо за статью. У меня вот появилась проблема, поставил эти кнопки, во все браузерах все прекрасно, а вот в проклятом IE все очень плохо, даже иконки не отображает, причем на вашем сайте в демонстрации все норм на ишаке. Заранее спасибо.

      1. Влад Бондаренко (Admin):
        /

        Здравствуйте, Андрей
        На самом деле IE несколько непредсказуем… и им пользуется всё меньше людей, тем более старыми версиями,
        Исходник, доступный для скачивания, и тот, который “Демо” – они идентичны, поэтому сложно сказать, в чём конкретно причина.
        В других браузерах должно быть всё ок.

        1. Андрей:
          http://sat-master.org/ @

          Ну тут согласен, можно полностью на него забить, пусть будет как есть.

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