Button by faizanullah1999

1.primary-button {
2 font-family: 'Ropa Sans', sans-serif;
3    /* font-family: 'Valorant', sans-serif; */
4 color: white;
5 cursor: pointer;
6 font-size: 13px;
7 font-weight: bold;
8 letter-spacing: 0.05rem;
9 border: 1px solid #0E1822;
10 padding: 0.8rem 2.1rem;
11 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
12 background-color: #0E1822;
13 background-size: 200%;
14 background-position: 200%;
15 background-repeat: no-repeat;
16 transition: 0.3s ease-in-out;
17 transition-property: background-position, border, color;
18 position: relative;
19 z-index: 1;
20}
21
22.primary-button:hover {
23 border: 1px solid #FF4655;
24 color: white;
25 background-position: 40%;
26}
27
28.primary-button:before {
29 content: "";
30 position: absolute;
31 background-color: #0E1822;
32 width: 0.2rem;
33 height: 0.2rem;
34 top: -1px;
35 left: -1px;
36 transition: background-color 0.15s ease-in-out;
37}
38
39.primary-button:hover:before {
40 background-color: white;
41}
42
43.primary-button:hover:after {
44 background-color: white;
45}
46
47.primary-button:after {
48 content: "";
49 position: absolute;
50 background-color: #FF4655;
51 width: 0.3rem;
52 height: 0.3rem;
53 bottom: -1px;
54 right: -1px;
55 transition: background-color 0.15s ease-in-out;
56}
57
58.button-borders {
59 position: relative;
60 width: fit-content;
61 height: fit-content;
62}
63
64.button-borders:before {
65 content: "";
66 position: absolute;
67 width: calc(100% + 0.5em);
68 height: 50%;
69 left: -0.3em;
70 top: -0.3em;
71 border: 1px solid #0E1822;
72 border-bottom: 0px;
73    /* opacity: 0.3; */
74}
75
76.button-borders:after {
77 content: "";
78 position: absolute;
79 width: calc(100% + 0.5em);
80 height: 50%;
81 left: -0.3em;
82 bottom: -0.3em;
83 border: 1px solid #0E1822;
84 border-top: 0px;
85    /* opacity: 0.3; */
86 z-index: 0;
87}
88
89.shape {
90 fill: #0E1822;
91}
92