Кнопка поставить лайк на CSS
Интересное решение для кнопок лайков и сердечек на CSS.
Я сегодня уже писал в предыдущей статье что наткнулся на на канал создателя СSS анимации Аарона Икера и хочу поделиться интересным решением для кнопок лайков! В примере представлены сразу два варианта: кнопки и сердечка!
Aaron Iker
Веб-дизайнер и разработчик интерфейса, работающий над чистыми и удобными интерфейсами.
Надеюсь, вам понравилось!
Статьи по теме
Эффекты прокрутки параллакса и параллакс анимация
Анимированные иконки соц. сетей на CSS3
Примеры использования CSS тени текста
Интересная форма для отправки сообщения с сайта
Раскрутка в соцсетях
В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.
Крутые кнопки для вашего сайта
Кнопки, не мало важная состовляющая почти для каждого сайта. Ведь за кнопкой может стоят ценный функционал, который к примеру отвечает за отображения определенного контента, за отправку формы, за перелиновку и многое другое. В любом случае, если не на декстопную, то на мобильную версию 100% потребуется
Кнопка bars
See the Pen Menu icon with a spin by Aleksandrs (@CoolS2) on CodePen.0
Кнопка отправка сообщения
See the Pen Flyaway Send Button by Aleksandrs (@CoolS2) on CodePen.0 Стилей получилось много, но кнопка согласитесь крутая!
Ajax кнопка
See the Pen animation submit button by Aleksandrs (@CoolS2) on CodePen.0 Отлично подойдет в такие моменты, когда идет загрузка контента, либо любая другая загрузка после нажатия на кнопку.
Кнопка лайк в виде сердца
See the Pen Heart like by Aleksandrs (@CoolS2) on CodePen.0 Интересно ваше мнение, считаете ли вы эти кнопки классными? Оставляйте свои комментарии ниже. Так же можете почитать о том, Как скрыть блок при клике за его пределами?
Кнопка «Мне нравится» — рейтинг для сайта
Добавьте виджет кнопки Лайк на ваш сайт с помощью нескольких строк HTML-кода!
Позвольте посетителям голосовать, оставляя лайки и дислайки на вашем сайте!
Получайте мгновенную статистику и аналитику!
Получайте тысячи лайков и репостов!
Получить код Получить плагин
10 лет успеха!
41 тема
Плагины и руководства
WordPress
Joomla
Drupal
WIX
Weebly
Shopify
Squarespace
uCoz
Blogger
Tumblr
vBulletin
44 языка
Google Rich Snippets
Сделайте ваш сайт привлекательным для посетителей в результатах поиска!
Повысьте рейтинг в поисковых системах!
Увеличьте число кликов!
Произвольные темы
Для мобильных
92 параметра
- Вам не нужно разрабатывать скрипт кнопки «Мне нравится» и «Не нравится» самостоятельно — просто скопируйте код кнопки «Мне нравится» и вставьте в HTML-код своего сайта.
- Настраивайте кнопку «Мне нравится» полностью под свои нужды.
- Задавайте произвольные тексты для кнопок лайк и дислайк.
- Настраивайте внешний вид с помощью CSS.
Поделиться
Проголосовав, пользователи могут поделиться ссылкой в социальных сетях: ВКонтакте, Одноклассники, Twitter, Facebook и т.д.
Онлайн-отчёты
Статистика голосования
График голосов
Сбор пожертвований
Выводите кнопки «Отблагодарить рублём» во всплывающем окне и собирайте пожертвования без каких-либо комиссий!
Асинхронная загрузка
Кнопка «Мне нравится» загружается асинхронно, поэтому не замедляет работу вашего сайта.
REST API
- Получайте статистику по лайкам для вашего сайта в форматах JSON, CSV и HTML с помощью простейшего REST API.
- Изменяйте количество лайков и дислайков для кнопок на вашем сайте.
Генератор кода кнопки «Мне нравится»
Тарифный план сайта
Отзывы
Просто упомяните @likebtn в Твиттере и мы добавим ваш отзыв
Партнёрская программа
Зарабатывайте деньги с LikeBtn! Разместите нашу реферальную ссылку или баннер на веб-сайте, получайте вознаграждения в виде 25% пожизненно от всех платежей, сделанных привлечённым клиентом (в том числе от всех его будущих платежей по продлению тарифных планов). Реферальные вознаграждения выплачивается вам через PayPal (для России только на счета категории Личный) в конце каждого месяца. Что если у меня нет счета PayPal? Начать зарабатывать
Как сделать лайк в html
Анимация Сердца Twitter на чистом 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;
>
>
Как видим, что не чего сложного нет, главное теперь остается подключить по назначению, хотя с другой стороны такая оригинальная кнопка может подойти под заданный переход.