Простые кнопки на чистом CSS

Сегодня мы научимся быстро создавать красивые кнопки для сайта, используя только CSS. Создание кнопок – сложный процесс, который я предпочитаю слегка автоматизировать.
Примеры кнопок:











А самое главное, мы научимся быстро создавать красивые кнопки нужных нам цветов с минимумом затрат.

Шаг 1. Скачайте готовый buttons.css.

Шаг 2. Забросим его на сервер. Если у вас WordPress, поместите файл buttons.css в папку с темой.

Шаг 3. Подключим таблицу стилей. Для WordPress добавьте в header.php запись

<link href=«/куда вы скопировали/buttons.css» rel=«stylesheet» type=«text/css» />

Шаг 4. Создаем кнопку. Для этого этапа я использую элемент input. Также можно применить созданные классы и к гиперссылке.

<input class=«asbtn red» type=«submit» value=«Пример кнопки»/>

Здесь asbtn – класс описывающий кнопку, а red – класс описывающий цвет кнопки. На данный момент в buttons.css доступно три класса:

  • orange
  • red
  • green
  • yellow
  • lightblue
  • blue
  • purple
  • pink
  • sky
  • verde
  • cream

Кнопки будут пополняться. Если есть вопросы – пишите в комментарии.

Запись опубликована в рубрике Wordpress, Блог, Дизайн, ЛикБез с метками , , . Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">