1.button {
2  display: block;
3  position: relative;
4  width: 56px;
5  height: 56px;
6  margin: 0;
7  overflow: hidden;
8  outline: none;
9  background-color: transparent;
10  border: 0;
11}
12
13.button:before,
14.button:after {
15  content: "";
16  position: absolute;
17  border-radius: 50%;
18  inset: 7px;
19}
20
21.button:before {
22  border: 4px solid #F0EEEF;
23  transition: opacity .4s cubic-bezier(.77, 0, .175, 1) 80ms, transform .5s cubic-bezier(.455, .03, .515, .955) 80ms;
24}
25
26.button:after {
27  border: 4px solid #96daf0;
28  transform: scale(1.3);
29  transition: opacity .4s cubic-bezier(.165, .84, .44, 1), transform .5s cubic-bezier(.25, .46, .45, .94);
30  opacity: 0;
31}
32
33.button:hover:before,
34.button:focus:before {
35  opacity: 0;
36  transform: scale(0.7);
37  transition: opacity .4s cubic-bezier(.165, .84, .44, 1), transform .5s cubic-bezier(.25, .46, .45, .94);
38}
39
40.button:hover:after,
41.button:focus:after {
42  opacity: 1;
43  transform: scale(1);
44  transition: opacity .4s cubic-bezier(.77, 0, .175, 1) 80ms, transform .5s cubic-bezier(.455, .03, .515, .955) 80ms;
45}
46
47.button-box {
48  display: flex;
49  position: absolute;
50  top: 0;
51  left: 0;
52}
53
54.button-elem {
55  display: block;
56  width: 20px;
57  height: 20px;
58  margin: 17px 18px 0 18px;
59  transform: rotate(180deg);
60  fill: #F0EEEF;
61}
62
63.button:hover .button-box,
64.button:focus .button-box {
65  transition: .4s;
66  transform: translateX(-56px);
67}
68
69