В этой статье узнаете, как можно простую кнопку лайка или сердечка, это как на Твиттер площадке, но создано более привлекательнее при наведение клика. Если мы ставим лайк, то мы просто видим изменение цветовой гаммы, но здесь на чистом CSS мы создадим более оригинальное оформление, которое многих удивит, ведь все идет на чистом стиле. Где на темном сайте или на светлом будет смотреться просто великолепно, но не забываем, что от цветовой палитры много зависит.
Анимация Сердца Twitter на чистом CSS
HTML
Код
<div class="scattering"></div>
CSS
Код
.scattering {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(http://zornet.ru/ABVUN/Aba/detunis/supasnab/heart.png) no-repeat;
background-position: 0 0;
cursor: pointer;
animation: fave-heart 1s steps(28);
}
.scattering:hover {
background-position: -2800px 0;
transition: background 1s steps(28);
}
@keyframes fave-heart {
0% {
background-position: 0 0;
}
100% {
background-position: -2800px 0;
}
}
Как видим, что не чего сложного нет, главное теперь остается подключить по назначению, хотя с другой стороны такая оригинальная кнопка может подойти под заданный переход.
Демонстрация
