Анімація в CSS-2. Приклади анімацій кнопок

Цей пост продовження поста про анімації через transition. Хочу додати кілька прикладів, які я використовую для анімації кнопок по наведенню.

Приклад 1. Плавна зміна коліру.

See the Pen animation background for hover by molodezky (@molodezky) on CodePen.

Приклад 2. Плавне горизонтальне заповнення.
В цій та наступних ми використовуюмо псевдоелемент :before. Для того, щоб він не перекривав текст кнопки, цей текст ми огортаємо в span.

See the Pen animation background for hover by molodezky (@molodezky) on CodePen.

Приклад 3. Плавне вертикальне заповнення.

See the Pen animation background for hover by molodezky (@molodezky) on CodePen.

Приклад 4. Блік.

See the Pen animation background for hover by molodezky (@molodezky) on CodePen.