Создание анимационной кнопки, используя CSS градиент

Одной из наиболее заманчивых особенностей в CSS3 является возможность добавления эффекта анимации. Вы можете оживить цвет фона, прозрачность, размер элемента, но не цвет градиента. Пока мы не можем анимировать цвет градиента в привычном понимании, однако есть одна хитрость, с помощью которой мы можем создать эффект перехода одного цвета в другой. Есть способ заставить двигать позицию фона с градиентом, используя CSS свойство — transition.

1
2
3
4
5
6
7
8
9
button {  
    background-image: linear-gradient(#5187c4, #1c2f45);  
    background-size: auto 200%;  
    background-position: 0 100%;  
    transition: background-position 0.5s;  
}      
button:hover {  
    background-position: 0 0;  
}

Вот наглядный пример того, как это работает. Наведите курсор на кнопку слева и увидите что происходит на самом деле (справа):

Как это иногда бывает из-за не осторожности с флешкой мы удаляем с нее важные данные, которые зачастую имелись в одном экземпляре. Если с вами произошло это происшествие не паникуйте, есть шанс восстановить потерянные файлы. В этой статье http://pcpro100.info/vosstanovlenie-fotografiy-s-fleshki/ Вы узнаете как можно восстановить файлы после удаления или форматирования.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!