1.card {
2  width: 310px;
3  padding: 1.2rem;
4  border-radius: 20px;
5  text-align: center;
6  transition: .5s;
7  background: linear-gradient(45deg,rgb(102, 34, 102), rgb(24, 12, 77),rgba(255, 119, 0, 0.564));
8  background-size: 200% 200%;
9  animation: backgroundChange 6s ease-in-out infinite;
10}
11
12@keyframes backgroundChange {
13  0% {
14    background-position: 0 50%;
15  }
16
17  50% {
18    background-position: 100% 50%;
19  }
20
21  100% {
22    background-position: 0 50%;
23  }
24}
25
26.card:hover {
27  box-shadow: 2px 2px 10px rgb(158, 158, 196);
28  transform: scale(1.03);
29  transition: .5s;
30}
31
32.heading {
33  font-size: 1.3rem;
34  font-weight: bold;
35  color: white;
36  padding: 1rem;
37  animation: blink 1.8s linear infinite;
38}
39
40@keyframes blink {
41  0% {
42    opacity: 0;
43  }
44
45  50% {
46    opacity: .5;
47  }
48
49  100% {
50    opacity: 1;
51  }
52}
53
54.heading span {
55  background: linear-gradient(to right, rgb(212, 78, 212),orange,rgb(77, 77, 241));
56  -webkit-background-clip: text;
57  -webkit-text-fill-color: transparent;
58  font-size: 1.5rem;
59}
60
61.content {
62  position: relative;
63  display: flex;
64  flex-direction: column;
65  justify-content: center;
66  align-items: center;
67  gap: 20px;
68}
69
70.item {
71  position: relative;
72  width: 150px;
73  height: 60px;
74  background: black;
75  border-radius: 5px;
76  cursor: pointer;
77  transition: 0.5s ease-in-out;
78  display: flex;
79  justify-content: center;
80  gap: .3rem;
81  align-items: center;
82  box-shadow: 0px 0px 5px white;
83}
84
85.item:nth-child(1) {
86  transform: translateX(-60px);
87}
88
89.item:nth-child(3) {
90  transform: translateX(60px);
91}
92
93.content:hover .item:nth-child(1) {
94  transform: translateX(0px);
95}
96
97.content:hover .item:nth-child(3) {
98  transform: translateX(0px);
99}
100
101.item--create {
102  color: steelblue;
103}
104
105.item--post {
106  color: rgb(179, 35, 35);
107}
108
109.item--inspire {
110  color: rgb(177, 59, 177);
111}
112
113.item--create:hover {
114  color: white;
115}
116
117.item::before {
118  content: "";
119  position: absolute;
120  left: 0;
121  width: 10px;
122  height: 100%;
123  transition: 0.5s ease-in-out;
124  border-top-left-radius: 5px;
125  border-bottom-left-radius: 5px;
126}
127
128.item:hover::before {
129  width: 100%;
130  border-top-right-radius: 5px;
131  border-bottom-right-radius: 5px;
132}
133
134.item--create::before {
135  background-color: rgb(14, 45, 129);
136}
137
138.item--post::before {
139  background-color: rgb(105, 2, 2);
140}
141
142.item--inspire::before {
143  background-color: rgb(87, 9, 87);
144}
145
146.item:hover svg {
147  color: white;
148  transform: rotate(360deg);
149  transition: all 2.0s;
150  z-index: 1;
151}
152
153.item span {
154  z-index: 1;
155}
156
157.item:hover span {
158  color: white;
159  transform: scale(1.2);
160  transition: all 2.0s;
161}
162
163button {
164  margin-top: 1rem;
165  border: none;
166  outline: none;
167  width: 90%;
168  padding: .7rem;
169  border-radius: 10px;
170  color: white;
171  font-size: 1.1rem;
172  font-weight: 600;
173  background-image: linear-gradient(to right, #173380, rgb(192, 188, 188) ,#0d2f94 );
174  background-size: 400% 100%;
175  transition: all 0.5s ease-in-out;
176}
177
178button:hover {
179  background-position: 100% 0;
180}
181