Кнопка с плавным переходом цвета CSS3

Недавно в одном из шаблонов WordPress, я наткнулась на очень удачное и простое решение кнопки. И поспешила добавить ее в свою коллекцию CCS3 кнопок. Выглядят кнопки так:

ButtonButton

В кнопках плавно сменяется один цвет на другой. Просто и красиво.

Чтобы на вашем сайте появилась такая кнопка, прежде всего вставьте CSS стиле в файл со стилями Вашего сайта:

В данных стилях параметры кнопки заданы в стиле button-slow, а цвета вынесены отдельно: красный (red_slow) и зеленый (green_slow). В каждом есть background-color — это цвет кнопки.
Исходный цвет — изначальный цвет кнопки;
Цвет перехода — цвет после наведения курсора мышки.
Изменяя эти цвета, вы можете создать свои собственные цветовые решения для сайта.

HTML самой кнопки очень прост. Это ссылка, к которой добавлен класс slowbutton:

В этом html в классе (class=»button_slow и green_slow») два стиля. button_slow нужно вставлять всегда, а цвет вставляейте тот, который вам нужен, или из примера (зеленый или красный) или ваш индивидуальный.


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

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

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

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