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

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

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

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

/*Кнопка с плавным переходом*/.button_slow{
    margin: 20px;
   padding: 10px 20px;
 border: 0px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius:4px;
    font-size: 14px;
    -moz-appearance: none ;
 -webkit-appearance: none ;
 appearance: none ;   
 cursor: pointer;
 display:inline-block;
   color: #FFFFFF;
 text-decoration:none;
}

.button_slow:hover {text-decoration:none;}

.red_slow {background-color: red; /*исходный цвет*/transition: background-color 0.5s linear 0s;}

.red_slow:hover {background-color: #33363B;/*цвет перехода*/}
 
.green_slow {background-color: green; /*исходный цвет*/transition: background-color 0.5s linear 0s;}

.green_slow:hover {background-color: #33363B;/*цвет перехода*/ }

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

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

<a href="/" class="button_slow green_slow">Button</a>

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