Button by ryota1231

1.animated-button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  gap: 4px;
6  padding: 16px 36px;
7  border: 4px solid;
8  border-color: transparent;
9  font-size: 16px;
10  background-color: ;
11  border-radius: 100px;
12  font-weight: 600;
13  color: #1f387e;
14  box-shadow: 0 0 0 2px #ffffff;
15  cursor: pointer;
16  overflow: hidden;
17  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
18}
19
20.animated-button svg {
21  position: absolute;
22  width: 24px;
23  fill: #1f387e;
24  z-index: 9;
25  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
26}
27
28.animated-button .arr-1 {
29  right: 16px;
30}
31
32.animated-button .arr-2 {
33  left: -25%;
34}
35
36.animated-button .circle {
37  position: absolute;
38  top: 50%;
39  left: 50%;
40  transform: translate(-50%, -50%);
41  width: 20px;
42  height: 20px;
43  background-color: #c5e5e4;
44  border-radius: 50%;
45  opacity: 0;
46  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
47}
48
49.animated-button .text {
50  position: relative;
51  z-index: 1;
52  transform: translateX(-12px);
53  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
54}
55
56.animated-button:hover {
57  box-shadow: 0 0 0 12px transparent;
58  color: #212121;
59  border-radius: 12px;
60}
61
62.animated-button:hover .arr-1 {
63  right: -25%;
64}
65
66.animated-button:hover .arr-2 {
67  left: 16px;
68}
69
70.animated-button:hover .text {
71  transform: translateX(12px);
72}
73
74.animated-button:hover svg {
75  fill: #1f387e;
76}
77
78.animated-button:active {
79  scale: 0.95;
80  box-shadow: 0 0 0 4px greenyellow;
81}
82
83.animated-button:hover .circle {
84  width: 220px;
85  height: 220px;
86  opacity: 1;
87}
88