« Анимационная кнопка, с использованием CSS и HTML »
Кнопки не только удобны для навигации пользователя, но и являются чрезвычайно важным элементом дизайна для любого веб-сайта. Поэтому мы решили добавить красивую анимационную кнопку, с использованием CSS стилей и HTML кода. Что представляет она из себя - кнопка с наложением градиента, а при наведении на неё появится красивая анимация цвета с право на лево, в добавок с анимационной тенью. Если вы хоть немного разбираетесь в CSS стилях, то вы легко измените цветовую гамму под свой сайт.
Если вы хотите увидеть как выглядит кнопка, то перейдите по ссылке демонстрация, которая находится после описания к материалу.
HTML код:
<a target="_blank" href="#">uFive.Ru</a>
</div>
CSS код:
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
padding: 10px 30px;
border-radius: 5px;
font-family: sans-serif;
color: #fff;
background: linear-gradient(
90deg,
#f6d365,
#fda085,
#84fab0,
#8fd3f4,
#fa709a,
#fee140
);
background-size: 400%;
z-index: 9;
font-weight: bold;
}
.but_ufive a::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
background: linear-gradient(
90deg,
#f6d365,
#fda085,
#84fab0,
#8fd3f4,
#fa709a,
#fee140
);
background-size: 400%;
z-index: -1;
opacity: 0;
border-radius: 5px;
}
.but_ufive a:hover::before {
opacity: 1;
filter: blur(40px);
animation: animate 5s linear infinite;
}
.but_ufive a:hover {
animation: animate 5s linear infinite;
}
@keyframes animate {
from {
background-position: 0%;
}
to {
background-position: 400%;
}
}
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |