• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Кнопки с эффектом анимации на CSS animation (Красивый набор примеров анимации при CSS 3 Animation)
Кнопки с эффектом анимации на CSS animation
Kosten
Дата: Вторник, 2021-09-28, 04:23 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38128
Награды: 65


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



Автоматическое увеличение размера кнопки на CSS

HTML

Код
<div class="vukidsa_mopas">ZORNET.RU</div>

CSS

Код
.vukidsa_mopas {
    height: 72px;
    line-height: 72px;
    background: #E41931;
    border-radius: 20px;
    font-weight: bold;
    font-size: 22px;
    padding: 20px;
    text-align: center;
    color: #FFFFFF;
    animation: animate_grow 2s infinite;
}
.vukidsa_mopas:hover {
    animation: none;
}

@keyframes animate_grow {
    0% {
  transform: scale3d(1, 1, 1);
    }
    50% {
  transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
  transform: scale3d(1, 1, 1);
    }
}

На этом вся установка.

Демонстрация
Прикрепления: 6203181.png(4.5 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2021-09-28, 04:26 | Сообщение 2
Оффлайн
Администраторы
Сообщений:38128
Награды: 65


Кнопка с эффектом на уменьшение размера на HTML + CSS


See the Pen
Эффекты анимации на CSS animation keyframes
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2021-09-28, 04:29 | Сообщение 3
Оффлайн
Администраторы
Сообщений:38128
Награды: 65


Оригинальная кнопка в движение на чистом CSS3


See the Pen
Эффекты анимации на ключевые кадры CSS
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2021-09-28, 04:31 | Сообщение 4
Оффлайн
Администраторы
Сообщений:38128
Награды: 65


Красивый эффект затухание кнопки на чистом CSS

Страна: (RU)
Kosten
Дата: Вторник, 2021-09-28, 04:35 | Сообщение 5
Оффлайн
Администраторы
Сообщений:38128
Награды: 65


Красивое сочетание цвета для кнопки анимированный градиент


See the Pen
Анимации на CSS
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Кнопки с эффектом анимации на CSS animation (Красивый набор примеров анимации при CSS 3 Animation)
  • Страница 1 из 1
  • 1
Поиск: