Анимированные кнопки сайта с 3D эффектом
Потрясающие социальные кнопки по своему стилю, которые созданы в анимированном направление, где при наведении клика происходит анимационный CSS эффект. Сами они простые для обывателя, но главное понятные по своему функционалу, которые предназначены для сайта на HTML и CSS. Они полностью выполнены в светлой гамме цвета, разве только идет разделение, что корректируется тенями, где нет другой палитры.
Что можно сказать, эти кнопки сделаны в уникальном дизайне, где на светлом формате кнопок, которые идут в месте в одном каркасе, с распределением на шрифтовые знаки, а точнее на изображение. Где все значение прописаны под свой оттенок, но на белом фоне они замечательно смотрятся. Что также не говорит о том, что на темный такой стильный эффект не установить, где просто нужно переписать стили на свой оттенок цвета.
Так будут отображаться после установочного процесса:
Установка:
Прописываем стили под шрифтовые знаки
Код
Код <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
HTML
Код
Код <div class ="konstruktsiya"> <a href="#" class="sotsialna_knopk"> <i class="fab fa-facebook-f" style="color: #2c4a88;"></i> </a> <a href="#" class="sotsialna_knopk"> <i class="fab fa-twitter" style="color: #0ca4de;"></i> </a> <a href="#" class="sotsialna_knopk"> <i class="fab fa-dribbble" style="color: #da3f7b;"></i> </a> <a href="#" class="sotsialna_knopk"> <i class="fab fa-linkedin-in" style="color:#13719e;"></i> </a> <a href="#" class="sotsialna_knopk"> <i class="fab fa-get-pocket" style="color:#e23147;"></i> </a> <a href="#" class="sotsialna_knopk"> <i class="far fa-envelope"></i> </a> </div>
CSS
Код
Код .konstruktsiya {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 94px;
width: 382px;
position: relative;
box-shadow: -7px -7px 20px 0px rgba(241, 241, 241, 0.6), -4px -4px 5px 0px rgba(249, 244, 244, 0.6), 7px 7px 20px 0px rgba(6, 6, 6, 0.1), 4px 4px 5px 0px rgba(6, 6, 6, 0.06), inset 0px 0px 0px 0px rgba(247, 246, 246, 0.6), inset 0px 0px 0px 0px rgba(14, 14, 14, 0.06), inset 0px 0px 0px 0px rgba(253, 250, 250, 0.6), inset 0px 0px 0px 0px rgba(14, 14, 14, 0.06);
transition: box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 10px;
}
.sotsialna_knopk {
height: 40px;
width: 40px;
border-radius: 5px;
background: #e8e9ea;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: rgba(25, 25, 25, 0);
-webkit-tap-highlight-color: rgba(14, 14, 14, 0);
box-shadow: -7px -7px 20px 0px rgba(245, 245, 245, 0.6), -4px -4px 5px 0px rgba(245, 245, 245, 0.6), 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px rgba(243, 243, 243, 0.6), inset 0px 0px 0px 0px rgba(14, 14, 14, 0.06), inset 0px 0px 0px 0px rgba(241, 240, 240, 0.6), inset 0px 0px 0px 0px rgba(16, 16, 16, 0.06);
transition: box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
font-size: 16px;
color: rgb(80, 88, 111);
text-decoration: none;
}
.sotsialna_knopk:active {
box-shadow: 4px 4px 6px 0 rgba(236, 236, 236, 0.5), -4px -4px 6px 0 rgba(121, 121, 121, 0.2), inset -4px -4px 6px 0 rgba(224, 224, 224, 0.5), inset 4px 4px 6px 0 rgba(134, 134, 134, 0.3);
}
Такой стиль можно увидеть на различном формате, но по мне они отлично будут смотреться по теме на сайтах с фиксированной шириной, или блогах, так как по своим размерам они по умолчанию не слишком большие.
Это совершенно не означает, что самостоятельно в прикрепленном CSS вы сами можете поставить свое значение высоты и ширины, что идет стильное отображение под свой портал, или просто дополнение к основному дизайну.
Демонстрация
| После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
