• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Красивый эффект кнопки лайка на HTML + CSS (Анимированная кнопка лайка при клике и наведении клика)
Красивый эффект кнопки лайка на HTML + CSS
Kosten
Дата: Среда, 2020-08-12, 03:56 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


В этой статье узнаете, как можно простую кнопку лайка или сердечка, это как на Твиттер площадке, но создано более привлекательнее при наведение клика. Если мы ставим лайк, то мы просто видим изменение цветовой гаммы, но здесь на чистом 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;
  }
}

Как видим, что не чего сложного нет, главное теперь остается подключить по назначению, хотя с другой стороны такая оригинальная кнопка может подойти под заданный переход.

Демонстрация
Прикрепления: 6180002.gif(184.2 Kb) · twitter-heart-c.zip(2.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Красивый эффект кнопки лайка на HTML + CSS (Анимированная кнопка лайка при клике и наведении клика)
  • Страница 1 из 1
  • 1
Поиск: