Сегодня мы будем делать красивую анимированную кнопку "Рассказать" на чистом HTML+CSS.
Весь проект я буду делать на CodePen, в конце будет ссылка на готовый проект.
Приступим!
Для начала подвязываем библиотеку Font Awesome.
Начнем с написания HTML.
<div class="share">
<span><i class="fas fa-share-alt"></i> Рассказать</span>
<a href="# "><i class="fab fa-facebook-f"></i></a>
<a href="# "><i class="fab fa-twitter"></i></a>
<a href="# "><i class="fab fa-instagram"></i></a>
<a href="# "><i class="fab fa-vk"></i></a>
</div>
Выглядит сейчас это так:
Далее начинаем работать уже над стилями.
body{
margin: 0;
padding: 0;
display: flex;
height: 100vh;
background-color: # dcdcdc;
align-items: center;
justify-content: center;
}
.share{
width: 250px;
height: 70px;
background-color: # f2f2f2;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
cursor: pointer;
transition: .3 linear;
}
.share span{
position: absolute;
width: 100%;
height: 100%;
background-color: # 040a29;
color: # dcdcdc;
border-radius: 50px;
text-align: center;
line-height: 70px;
z-index: 1;
transition: .6s linear;
}
Из основного тут можно отметить - размещение кнопки по центру с помощью flexbox, это один из нескольких вариантов размещения элемента по центру, наиболее удобный мне.
Делаем анимацию увеличения при наведении мыши.
.share:hover{
transform: scale(1.1);
}
Делаем скрытие верхнего блока.
.share:hover span{
transform: translateX(-100%);
}
Далее стилизуем наши иконки и добавляем анимацию.
.share:hover span{
transform: translateX(-100%);
transition-delay: .3s;
}
.share a{
flex: 1;
font-size: 25px;
color: # 040a29;
text-align: center;
transform: translateX(-100%);
opacity: 0;
transition: 0.3s linear;
}
.share:hover a{
opacity: 1;
transform: translateX(0);
}
Ну и напоследок сделаем красивое появление иконок путем проставление разной задержки.
.share a:nth-of-type(1){
transition-delay: 1s;
}
.share a:nth-of-type(2){
transition-delay: .8s;
}
.share a:nth-of-type(3){
transition-delay: .6s;
}
.share a:nth-of-type(4){
transition-delay: .4s;
}
Весь проект можно посмотреть тут - https://codepen.io/alekseifadeev/pen/KKKEgGN
Подписывайтесь на канал, комментируйте, предлагайте новые проекты.