Button by barisdogansutcu

1.content {
2  display: flex;
3  flex-direction: column;
4  justify-content: flex-start;
5  gap: 15px;
6  width: 300px;
7  height: 100px;
8  position: relative;
9  overflow: hidden;
10  border-radius: 14px;
11}
12.content::before {
13  content: "";
14  position: absolute;
15  left: 0%;
16  top: 50%;
17  transform: translateY(-50%);
18  bottom: 0;
19  width: 40px;
20  height: 96px;
21  background-image: linear-gradient(90deg, #ffffff1c, transparent);
22  z-index: 2;
23  border-radius: 10px 0 0 10px;
24}
25.content::after {
26  content: "";
27  position: absolute;
28  right: 0%;
29  top: 50%;
30  transform: translateY(-50%);
31  bottom: 0;
32  width: 40px;
33  height: 96px;
34  background-image: linear-gradient(-90deg, #ffffff1c, transparent);
35  z-index: 9;
36  border-radius: 0 10px 10px 0;
37}
38.basic-marquee {
39  display: flex;
40  align-items: center;
41  justify-content: center;
42  gap: 10px;
43  width: 100%;
44}
45.basic-marquee .button {
46  transition: all 0.3s ease;
47}
48.basic-marquee .button:hover {
49  transform: scale(1.1);
50  cursor: pointer;
51}
52.basic-marquee-1 {
53  animation: marquee 15s linear infinite;
54}
55.basic-marquee-2 {
56  animation: marquee 21s linear infinite;
57}
58.benefits {
59  display: flex;
60  flex-direction: column;
61  justify-content: center;
62  gap: 15px;
63  min-width: 900px;
64  height: 100%;
65  white-space: nowrap;
66  overflow: hidden;
67  position: absolute;
68  inset: 0;
69}
70@keyframes marquee {
71  0% {
72    transform: translateX(-10%);
73  }
74  100% {
75    transform: translateX(-50%);
76  }
77}
78
79.basic-marquee svg {
80  width: 40px;
81}
82.basic-marquee button {
83  background-color: transparent;
84  border: none;
85  padding: 0;
86  margin: 0;
87  display: flex;
88  align-items: center;
89  justify-content: center;
90}
91.cls-1 {
92  fill: #1ab7ea;
93}
94
95.cls-1,
96.cls-2 {
97  fill-rule: evenodd;
98}
99
100.cls-2 {
101  fill: #fff;
102}
103
104.cls-3 {
105  fill: #ee8208;
106  fill-rule: evenodd;
107}
108
109.cls-4 {
110  fill: #fff;
111}
112
113.cls-5,
114.cls-6 {
115  fill-rule: evenodd;
116}
117
118.cls-5 {
119  fill: #48dd55;
120}
121.cls-6 {
122  fill: #fff;
123}
124
125.cls-7 {
126  fill: #0a66c2;
127}
128
129.cls-7,
130.cls-8 {
131  fill-rule: evenodd;
132}
133
134.cls-8 {
135  fill: #fff;
136}
137
138.cls-9 {
139  fill: #10b7f4;
140}
141
142.cls-9,
143.cls-10 {
144  fill-rule: evenodd;
145}
146
147.cls-10 {
148  fill: #fff;
149}
150
151.cls-11 {
152  fill: #1da1f2;
153}
154
155.cls-11,
156.cls-12 {
157  fill-rule: evenodd;
158}
159
160.cls-12 {
161  fill: #fff;
162}
163
164.cls-13 {
165  fill: #ea4c89;
166}
167
168.cls-13,
169.cls-14 {
170  fill-rule: evenodd;
171}
172
173.cls-14 {
174  fill: #fff;
175}
176
177.cls-15 {
178  fill: #1769ff;
179}
180
181.cls-15,
182.cls-16 {
183  fill-rule: evenodd;
184}
185
186.cls-16 {
187  fill: #fff;
188}
189
190.cls-17 {
191  fill: #f26522;
192}
193
194.cls-17,
195.cls-18 {
196  fill-rule: evenodd;
197}
198
199.cls-18 {
200  fill: #fff;
201}
202