Card by PINKYSEE

1.card {
2  position: relative;
3  box-shadow: 0 0 10px #ae00ff, 0 0 25px #001eff, 0 0 50px #ae00ff;
4  background: linear-gradient(320.62deg, #21CFDC 0%, rgba(183, 53, 162, 0.522696) 47.73%, rgba(44, 70, 206, 0) 100%);
5  border-radius: 50px;
6  width: 300px;
7  height: 300px;
8  padding: 25px;
9}
10
11.content {
12  display: flex;
13  width: 100%;
14  height: 150px;
15  overflow: hidden;
16}
17
18.item {
19  position: relative;
20  min-height: 100%;
21  min-width: 100%;
22  overflow: hidden;
23  animation: infinite 9s createanim;
24  animation-delay: 0s;
25}
26
27.item--create {
28  overflow: hidden;
29  position: relative;
30}
31
32.item--post {
33  overflow: hidden;
34  position: relative;
35}
36
37.item--inspire {
38  overflow: hidden;
39  position: relative;
40}
41
42.item--create svg {
43  width: 128px;
44  height: 128px;
45  position: absolute;
46  left: 25%;
47}
48
49.item--post span {
50  position: absolute;
51  top: 80%;
52  left: 38%;
53  font-size: 24px;
54}
55
56.item--post svg {
57  width: 128px;
58  height: 128px;
59  position: absolute;
60  left: 25%;
61}
62
63.item--create span {
64  position: absolute;
65  top: 80%;
66  left: 32%;
67  font-size: 24px;
68}
69
70.item--inspire svg {
71  width: 128px;
72  height: 128px;
73  position: absolute;
74  left: 25%;
75}
76
77.item--inspire span {
78  position: absolute;
79  top: 80%;
80  left: 30%;
81  font-size: 24px;
82}
83
84.heading {
85  display: flex;
86  flex-direction: column;
87  text-align: center;
88  font-size: 20px;
89}
90
91.heading span {
92  font-size: 24px;
93  font-weight: 900;
94  letter-spacing: 20px;
95}
96
97button {
98  border: 1px solid white;
99  color: white;
100  background-color: #001eff00;
101  height: 50px;
102  width: 250px;
103  font-size: 20px;
104  border-radius: 50px;
105  position: absolute;
106  bottom: 15px;
107  transition: all 0.3s;
108  left: 25px;
109}
110
111button:hover {
112  width: 260px;
113  left: 20px;
114  bottom: 20px;
115}
116
117.content:hover .item {
118  animation-play-state: paused;
119}
120
121@keyframes createanim {
122  0% {
123    left: 70%;
124  }
125
126  100% {
127    left: -280%;
128  }
129}