Красивая анимация на кнопку, которая по умолчанию пульсирует, где по центру выставлен значок телефонной трубки. Но только стоит вам нажать, так появляются вокруг нее еще несколько круглых кнопов, где уже представлены социальные знаки.
HTML
Код
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<input type="checkbox">
<button><i class="fa fa-phone"></i></button>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</body>
</html>
CSS
Код
html,
body {
height: 100%;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
overflow: hidden;
}
body {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
}
div {
display: inline-block;
position: relative;
transform: scale(1.3)
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
button {
position: relative;
z-index: 1;
outline: 0;
}
button,
ul li a i.fa {
background: rgba(0, 0, 0, 0.1);
display: inline-block;
color: #000;
text-align: center;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
}
ul li a i.fa {
height: 37px;
width: 37px;
line-height: 37px;
}
ul li {
display: inline-block;
position: absolute;
top: 0;
opacity: 0;
transform: translate(0 0);
left: 0;
transition: .5s
}
input {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
z-index: 2;
opacity: 0;
border-radius: 50%;
}
input:checked~ul li:nth-child(1) {
transform: translate(-23px, -67.2px);
}
input:checked~ul li:nth-child(2) {
transform: translate(-72px, -46px);
}
input:checked~ul li:nth-child(3) {
transform: translate(-85px, -50%);
top: 50%;
}
input:checked~ul li:nth-child(4) {
transform: translate(-73px, 57px);
}
input:checked~ul li {
opacity: 1
}
input:checked~ul li:nth-child(5) {
transform: translate(-23px, 80px);
}
button:after,
button:before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
border-radius: 100%;
z-index: -1;
animation: falsh 1.5s infinite linear;
}
@keyframes falsh {
from {
opacity: 1;
transform: scale(1)
}
to {
opacity: 0;
transform: scale(2)
}
}
Демонстрация
