Ни в коем случае нельзя бездумно создавать на сайте анимации, просто ради анимации. Как говорится, медицинский совет "не навреди", здесь вполне уместен. В каком случае существование анимированной кнопки , пойдет сайту на пользу? Пожалуй, только в одном, когда надо привлечь внимание пользователя.
Ни в коем случае нельзя бездумно создавать на сайте анимации, просто ради анимации. Как говорится, медицинский совет "не навреди", здесь вполне уместен. В каком случае существование анимированной кнопки, пойдет сайту на пользу? Пожалуй, только в одном, когда надо привлечь внимание пользователя.
Необычная анимация - вызывает у пользователя интерес и побуждает его к действию. На этом уроке, мы сделаем CSS анимацию кнопки, без привлечения сторонних библиотек.
Суть анимации - вращаются три кольца замысловатой формы, с разной скоростью и в противоположных направлениях. При наведении мыши кольца перестают вращаться, а рамки заполняются фоновым цветом.
HTML разметка
Создадим квадрат с пустыми блоками и ссылкой button внутри.
<div class="square">
<div></div>
<div></div>
<div></div>
<div class="button">
<a href="#">Button</a>
</div>
</div>
CSS код
Тег body будет служить флекс-контейнером для квадрата. Следующий код поставит будущую кнопку в центре браузера.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
Создадим блок с квадратом, который будет служить лишь основой для колец и поэтому останется невидимым. Квадрат одновременно служит как флекс-контейнером для ссылки button, так и флекс-элементом у body. В нашем примере с анимированной кнопкой, флекс-технология используется для выравнивания элементов по центру.
.square {
position: relative;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
В HTML разметке, мы заготовили три пустых блока, каждый из которых и будет кольцом. Добавлять стили каждому кольцу, мы будем через псевдокласс nth-child.
Первое кольцо
Главная фишка колец в том, что у них своеобразная форма, которой можно легко добиться с помощью онлайн-генератора fancy-border-radius. Вы формируете нужную форму и копируете готовый код.
.square div:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.8s;
animation: animate 6s linear infinite;
}
Hover эффект убирает рамку и заполняет кольцо фоном.
.square:hover div:nth-child(1) {
border: none;
background: rgba(255,255,255);
}
Остальные два кольца отличаются от первого другим цветом, скоростью и направлением вращения.
.square div:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #7ef9ff;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.8s;
animation: animate2 4s linear infinite;
}
.square:hover div:nth-child(2) {
border: none;
background: rgba(126,249,255);
}
.square div:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #ff66cc;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.8s;
animation: animate 10s linear infinite;
}
.square:hover div:nth-child(3) {
border: none;
background: rgba(255,102,204);
}
Анимация @keyframes
Анимация состоит из двух ключевых кадров:
- 0% - первый кадр
- 100% - последний кадр
Первая анимация заставит одно кольцо вращаться против часовой стрелки, а два других по часовой стрелке.
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
@keyframes animate2
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
Стилизуем ссылку внутри кнопки.
.button a {
position: relative;
display: inline-block;
margin-top: 4px;
text-decoration: none;
color: #fff;
font-weight: 800;
font-size: 30px;
font-family: 'Indie Flower', sans-serif;
}
