Card by JOBOYA

1.card {
2  border-radius: 10px;
3  box-shadow: 0 4px 6px rgba(0,0,0,.1);
4  margin: 20px;
5  max-width: 400px;
6  padding: 20px;
7  position: relative;
8  transition: 0.3s
9}
10
11.card:hover {
12  transform: scale(1.05);
13  box-shadow: 0 10px 20px rgba(0,0,0,.2)
14}
15
16.heading {
17  font-size: 24px;
18  font-weight: 700;
19  margin-bottom: 15px;
20  text-align: center;
21  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
22}
23
24.heading span {
25  color: #3498db
26}
27
28.content {
29  display: flex;
30  justify-content: space-around;
31  margin-bottom: 20px
32}
33
34.item {
35  align-items: center;
36  display: flex;
37  flex-direction: column;
38  font-size: 14px;
39  text-align: center;
40  transition: 0.3s;
41}
42
43.item:hover {
44  animation: slotMachine 0.8s ease-in-out forwards
45}
46
47@keyframes slotMachine {
48  0% {
49    transform: translateY(0);
50    opacity: 1
51  }
52
53  25% {
54    transform: translateY(-100%);
55    opacity: 0
56  }
57
58  50% {
59    transform: translateY(100%);
60    opacity: 0
61  }
62
63  75% {
64    transform: translateY(0);
65    opacity: 1
66  }
67
68  100% {
69    transform: translateY(0);
70    opacity: 1
71  }
72}
73
74.content .item {
75  display: flex;
76  align-items: center;
77  justify-content: center;
78  flex-direction: column;
79  text-transform: uppercase;
80  font-weight: 700
81}
82
83.content .item span {
84  margin-top: 8px;
85  font-size: 14px;
86  color: rgb(111,110,110);
87  font-weight: 400;
88  cursor: pointer
89}
90
91.heading span {
92  display: inline-block;
93  background-image: linear-gradient(to right,#3498db,#5a5aeb,#7d44f0,#9a16ec);
94  background-clip: text;
95  color: transparent
96}
97
98.item svg {
99  fill: #3498db;
100  height: 48px;
101  margin-bottom: 5px;
102  width: 48px;
103}
104
105.item--create,
106.item--post,
107.item--inspire {
108  color: #4d34db !important;
109}
110
111button {
112  position: relative;
113  overflow: hidden;
114  background-color: #3498db;
115  border: none;
116  border-radius: 5px;
117  color: #fff;
118  cursor: pointer;
119  font-size: 16px;
120  font-weight: 600;
121  margin-top: 10px;
122  padding: 10px 20px;
123  text-align: center;
124  text-transform: uppercase;
125  transition: 0.3s;
126  width: 100%;
127  z-index: 1
128}
129
130button::after {
131  content: "";
132  position: absolute;
133  top: 0;
134  left: 0;
135  width: 100%;
136  height: 100%;
137  background-image: linear-gradient(to right,#3498db,#5a5aeb,#7d44f0,#9a16ec);
138  opacity: 0;
139  z-index: -1;
140  transition: opacity 0.3s
141}
142
143button:hover::after {
144  opacity: 1
145}
146