Button by xopc333

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  cursor: pointer;
11  border: 0;
12}
13
14.button:before,
15.button:after {
16  content: "";
17  position: absolute;
18  border-radius: 50%;
19  inset: 7px;
20}
21
22.button:before {
23  border: 4px solid #f0eeef;
24  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
25    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
26}
27
28.button:after {
29  border: 4px solid #96daf0;
30  transform: scale(1.3);
31  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
32    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
33  opacity: 0;
34}
35
36.button:hover:before,
37.button:focus:before {
38  opacity: 0;
39  transform: scale(0.7);
40  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
41    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
42}
43
44.button:hover:after,
45.button:focus:after {
46  opacity: 1;
47  transform: scale(1);
48  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
49    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
50}
51
52.button-box {
53  display: flex;
54  position: absolute;
55  top: 0;
56  left: 0;
57}
58
59.button-elem {
60  display: block;
61  width: 20px;
62  height: 20px;
63  margin: 17px 18px 0 18px;
64  transform: rotate(180deg);
65  fill: #f0eeef;
66}
67
68.button:hover .button-box,
69.button:focus .button-box {
70  transition: 0.4s;
71  transform: translateX(-56px);
72}
73