1button {
2  padding: 0;
3  margin: 0;
4  border: none;
5  background: none;
6}
7
8button {
9  --primary-color: #111;
10  --hovered-color: #c84747;
11  position: relative;
12  display: flex;
13  font-weight: 600;
14  font-size: 20px;
15  gap: 0.5rem;
16  align-items: center;
17}
18
19button p {
20  margin: 0;
21  position: relative;
22  font-size: 20px;
23  color: var(--primary-color)
24}
25
26button::after {
27  position: absolute;
28  content: "";
29  width: 0;
30  left: 0;
31  bottom: -7px;
32  background: var(--hovered-color);
33  height: 2px;
34  transition: 0.3s ease-out;
35}
36
37button p::before {
38  position: absolute;
39/*   box-sizing: border-box; */
40  content: "Subscribe";
41  width: 0%;
42  inset: 0;
43  color: var(--hovered-color);
44  overflow: hidden;
45  transition: 0.3s ease-out;
46}
47
48button:hover::after {
49  width: 100%;
50}
51
52button:hover p::before {
53  width: 100%;
54}
55
56button:hover svg {
57  transform: translateX(4px);
58  color: var(--hovered-color)
59}
60
61button svg {
62  color: var(--primary-color);
63  transition: 0.2s;
64  position: relative;
65  width: 15px;
66  transition-delay: 0.2s;
67}