Красивый эффект для кнопок всегда привлекает внимание, даже если по умолчанию происходит анимационный эффект. В этой статье представлено несколько вариантов анимации, где также будет присутствовать эффект при наведении курсора. Все они в большинстве созданы для того, чтоб как можно больше привлечь внимание, ведь на них можно написать ключевые слова, что по клику переходим к основному материалу.
Автоматическое увеличение размера кнопки на 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);
}
}
На этом вся установка.
Демонстрация
