Как сделать кнопку с эффектом нажатия с помощью CSS

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

Button 1Button 2

Для начала рассмотрим HTML и CSS этих кнопок

HTML

Кнопка создается из ссылки путем добаления классов.
push_but это класс отвечающий за стили и анимацию кнопки;
red — стили красной кнопки;
yellow — стили желтой кнопки;

CSS

А вот и CSS стили кнопок. Их Вам нужно скопировать в css файл Вашего сайта.

Изменения цвета кнопки с эффектом нажатия

Хочу Вам рассказать как добавить свои цвета для этой кнокпи. Для этого в качестве примера будем создавать зеленый цвет кнопки. Итак вот шаги, которые вам нужно будет предпринять для того,чтобы создать свой цвет кнопки:

  1. Скопировать полностью все классы отвечающие за цвет, например класс red. Для этого копируем .red и все его содержимое, которое в фигурных скобках { } и .red:hover со всем его содержимым фигурных скобках { }. Помещаем скопированое содержимое в блокнот в текстовый файл.
  2. Первым делом нужно изменить названия классов CSS. Например, для нашего примера назовем новый класс green.
    В блокноте нажимаете Правка — Заменить (CTRL+H).

    В поле «Что:» пишите red
    В поле «Чем: — green

  3. Изменяем непостредственно цвета. В блокноте копируем цвет #bf1e2e. В палитре цветов HTML выбираем нужный цвет. Я выбрала зеленый Forest Green под номером #228B22. Теперь в блокноте с помощью той же команды «Заменить» меняем цвет #bf1e2e на #228B22.
  4. Теперь нужно выбрать цвет, тоже зеленый но по-светлее. YellowGreen подойдет. Опять командой заменить меняем уже #f58f99 на #9ACD32.
  5. Добавляем новый стиль в css файл сайта после уже существующих. Это будет новый цвет кнопки. Вот что у меня получилось в CSS:

  6. HTML код новой кнопки теперь будет выглядеть так:

Ну а вот собственно и результат:

Button 1


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

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

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