Card by MijailVillegas

This card was created for Open-Source CSS Odyssey

#e8e8e8

1.card {
2  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
3  font-weight: bolder;
4  color: hsla(0, 0%, 0%, 0.3);
5  z-index: 1;
6  width: 280px;
7  height: 400px;
8  display: grid;
9  justify-items: center;
10  align-items: center;
11  align-content: space-around;
12  text-align: center;
13  grid-template-rows: 0.25fr 0.5fr 0.25fr;
14  padding: 1em;
15  border-radius: 3em;
16  border: solid 0.5em #fafafa;
17  background: #fafafa;
18  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgMjQwMCA4MDAiIG9wYWNpdHk9IjAuODgiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ic3NzdXJmLWdyYWQiPjxzdG9wIHN0b3AtY29sb3I9ImhzbGEoMTc0LCA3NyUsIDUwJSwgMS4wMCkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwJSI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9ImhzbGEoMTc0LCA3NyUsIDgwJSwgMC4yOSkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0idXJsKCNzc3N1cmYtZ3JhZCkiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwtODguNTg3MjQ5NzU1ODU5MzgpIj48cGF0aCBkPSJNIDAgMjkyLjE4MDc4ODA0ODE2NzYgUSA2MDAgNjA5Ljg4OTY2NjQwOTY4NTIgODAwIDI5MC4xNzQ1MDY0NTIzMDIxIFEgMTQwMCA2MzMuODIzNjQ1MDgwOTAxMyAxNjAwIDMxMi45MTEwMzE2MDA3MTgzMyBRIDIyMDAgNTU2LjA5OTYxNDc2MzY4NjEgMjQwMCAzMzcuNzE2MTYyODQ1MjExMSBMIDI0MDAgODAwIEwgMCA4MDAgTCAwIDM0OC40OTg2MjAwNDgzMjYyNSBaIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsNDEpIiBvcGFjaXR5PSIwLjA1Ij48L3BhdGg+PHBhdGggZD0iTSAwIDI5Mi4xODA3ODgwNDgxNjc2IFEgNjAwIDYwOS44ODk2NjY0MDk2ODUyIDgwMCAyOTAuMTc0NTA2NDUyMzAyMSBRIDE0MDAgNjMzLjgyMzY0NTA4MDkwMTMgMTYwMCAzMTIuOTExMDMxNjAwNzE4MzMgUSAyMjAwIDU1Ni4wOTk2MTQ3NjM2ODYxIDI0MDAgMzM3LjcxNjE2Mjg0NTIxMTEgTCAyNDAwIDgwMCBMIDAgODAwIEwgMCAzNDguNDk4NjIwMDQ4MzI2MjUgWiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDgyKSIgb3BhY2l0eT0iMC4yNCI+PC9wYXRoPjxwYXRoIGQ9Ik0gMCAyOTIuMTgwNzg4MDQ4MTY3NiBRIDYwMCA2MDkuODg5NjY2NDA5Njg1MiA4MDAgMjkwLjE3NDUwNjQ1MjMwMjEgUSAxNDAwIDYzMy44MjM2NDUwODA5MDEzIDE2MDAgMzEyLjkxMTAzMTYwMDcxODMzIFEgMjIwMCA1NTYuMDk5NjE0NzYzNjg2MSAyNDAwIDMzNy43MTYxNjI4NDUyMTExIEwgMjQwMCA4MDAgTCAwIDgwMCBMIDAgMzQ4LjQ5ODYyMDA0ODMyNjI1IFoiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwxMjMpIiBvcGFjaXR5PSIwLjQzIj48L3BhdGg+PHBhdGggZD0iTSAwIDI5Mi4xODA3ODgwNDgxNjc2IFEgNjAwIDYwOS44ODk2NjY0MDk2ODUyIDgwMCAyOTAuMTc0NTA2NDUyMzAyMSBRIDE0MDAgNjMzLjgyMzY0NTA4MDkwMTMgMTYwMCAzMTIuOTExMDMxNjAwNzE4MzMgUSAyMjAwIDU1Ni4wOTk2MTQ3NjM2ODYxIDI0MDAgMzM3LjcxNjE2Mjg0NTIxMTEgTCAyNDAwIDgwMCBMIDAgODAwIEwgMCAzNDguNDk4NjIwMDQ4MzI2MjUgWiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDE2NCkiIG9wYWNpdHk9IjAuNjIiPjwvcGF0aD48cGF0aCBkPSJNIDAgMjkyLjE4MDc4ODA0ODE2NzYgUSA2MDAgNjA5Ljg4OTY2NjQwOTY4NTIgODAwIDI5MC4xNzQ1MDY0NTIzMDIxIFEgMTQwMCA2MzMuODIzNjQ1MDgwOTAxMyAxNjAwIDMxMi45MTEwMzE2MDA3MTgzMyBRIDIyMDAgNTU2LjA5OTYxNDc2MzY4NjEgMjQwMCAzMzcuNzE2MTYyODQ1MjExMSBMIDI0MDAgODAwIEwgMCA4MDAgTCAwIDM0OC40OTg2MjAwNDgzMjYyNSBaIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMjA1KSIgb3BhY2l0eT0iMC44MSI+PC9wYXRoPjxwYXRoIGQ9Ik0gMCAyOTIuMTgwNzg4MDQ4MTY3NiBRIDYwMCA2MDkuODg5NjY2NDA5Njg1MiA4MDAgMjkwLjE3NDUwNjQ1MjMwMjEgUSAxNDAwIDYzMy44MjM2NDUwODA5MDEzIDE2MDAgMzEyLjkxMTAzMTYwMDcxODMzIFEgMjIwMCA1NTYuMDk5NjE0NzYzNjg2MSAyNDAwIDMzNy43MTYxNjI4NDUyMTExIEwgMjQwMCA4MDAgTCAwIDgwMCBMIDAgMzQ4LjQ5ODYyMDA0ODMyNjI1IFoiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwyNDYpIiBvcGFjaXR5PSIxLjAwIj48L3BhdGg+PC9nPjwvc3ZnPg==");
19  background-repeat: no-repeat;
20  background-size: cover;
21  background-position: revert;
22  box-shadow: 5px 5px 7px hsla(0, 0%, 84%, 0.447), -3px -4px 7px rgba(255, 255, 255, 0.3843137255);
23  -webkit-backdrop-filter: blur(10px);
24  backdrop-filter: blur(10px);
25  transition: background-position 1s ease-in;
26  animation: blinkShadowsFilter 8s ease-in infinite;
27}
28
29.card .heading {
30  align-self: baseline;
31  display: grid;
32  letter-spacing: 3px;
33}
34
35.card .heading span {
36  -webkit-background-clip: text;
37  background-clip: text;
38  color: #afafaf;
39  background-color: transparent;
40  transition: all 1s ease-in;
41  transform: translateY(-20%);
42  text-align: center;
43  font-size: 3.5em;
44}
45
46.card button {
47  align-self: flex-end;
48  font-size: 1em;
49  border-style: none;
50  padding: 1em;
51  border-radius: 5em;
52  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
53  font-weight: bolder;
54  text-shadow: 3px 3px 5px #48beb3, -3px -3px 5px #68ffff;
55  color: #e0fff8;
56  background: #12a597;
57  background: linear-gradient(145deg, #5ef8e9, #4fd1c4);
58  box-shadow: 3px 3px 5px #48beb3, -3px -3px 5px #68ffff;
59}
60
61.card button:active {
62  background: #57e9db;
63  box-shadow: inset 3px 3px 5px #47bfb4, inset -3px -3px 5px #67ffff;
64}
65
66.card button:hover {
67  cursor: pointer;
68}
69
70.card:hover {
71  background-position: right;
72}
73
74.card:hover .heading span {
75  background-repeat: no-repeat;
76  background-size: cover;
77  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgODAwIDgwMCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJjY2NpcmN1bGFyLWdyYWQiIHI9IjUwJSIgY3g9IjUwJSIgY3k9IjUwJSI+CiAgICAgICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjYWMzZDAwIiBzdG9wLW9wYWNpdHk9IjAuNSI+PC9zdG9wPgogICAgICAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iaHNsKDI1LCA4MyUsIDQ5JSkiIHN0b3Atb3BhY2l0eT0iMSI+PC9zdG9wPgogICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjZTc4IiBzdG9wLW9wYWNpdHk9IjEiPjwvc3RvcD4KICAgICAgICA8L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2NjY2lyY3VsYXItZ3JhZCkiPjxjaXJjbGUgcj0iNjQzLjUiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iNTg1IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjUyNi41IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjQ2OCIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PGNpcmNsZSByPSI0MDkuNSIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PGNpcmNsZSByPSIzNTEiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iMjkyLjUiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iMjM0IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjE3NS41IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjExNyIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==");
78  -webkit-background-clip: text;
79  background-clip: text;
80  color: transparent;
81}
82
83.content {
84  width: 100%;
85  height: 100%;
86  display: flex;
87  flex-direction: column;
88  justify-content: space-between;
89  transition: all 1s ease-in;
90}
91
92.content .item {
93  width: -moz-fit-content;
94  width: fit-content;
95  display: flex;
96  gap: 1em;
97  align-items: center;
98  transition: all 0.8s ease-in-out;
99}
100
101.content .item span {
102  transition: all 0.5s ease-in;
103  width: 0%;
104  background: transparent;
105  font-size: 1.2em;
106}
107
108.content .item--create {
109  transition: all 0.8s ease-in-out;
110  transform: translateX(100%);
111}
112
113.content .item--post {
114  transition: all 0.8s ease-in-out;
115  transform: translateX(80%);
116}
117
118.content .item--inspire {
119  transition: all 0.8s ease-in-out;
120  transform: translateX(20%);
121}
122
123.content .item--inspire svg {
124  box-shadow: 4px 4px 7px #47bfb4, -4px -4px 7px #67ffff;
125}
126
127.content svg {
128  border-radius: 1em;
129  width: 2.5em;
130  height: 2.5em;
131  padding: 0.5em;
132  background: #fafafa;
133  box-shadow: 4px 4px 7px #d5d5d5, -4px -4px 7px #ffffff;
134}
135
136.content:hover .item {
137  padding-left: 2em;
138}
139
140.content:hover .item--create {
141  transform: translateX(20%);
142}
143
144.content:hover .item--post {
145  transform: translateX(20%);
146}
147
148.content:hover .item--inspire {
149  transform: translateX(20%);
150}
151
152.item:hover {
153  gap: 2em;
154  color: hsl(19, 78%, 65%);
155  cursor: pointer;
156}
157
158.item:hover span {
159  letter-spacing: 2px;
160  padding-inline: 1rem;
161  border-radius: 1em;
162  color: rgba(0, 0, 0, 0.6);
163}
164
165.item:hover svg {
166  box-shadow: inset 4px 4px 7px #d5d5d5, inset -4px -4px 7px #ffffff;
167}
168
169@keyframes blinkShadowsFilter {
170  0% {
171    filter: drop-shadow(23px 12px 28px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px -18px 28px hsla(171, 80%, 73%, 0.3));
172  }
173
174  25% {
175    filter: drop-shadow(23px -12px 24px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px 18px 24px hsla(171, 100%, 93%, 0.3));
176  }
177
178  50% {
179    filter: drop-shadow(23px 12px 30px hsla(218, 100%, 88%, 0.3)) drop-shadow(-20px 18px 30px hsla(171, 95%, 83%, 0.3));
180  }
181
182  75% {
183    filter: drop-shadow(20px -18px 25px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px 20px 25px hsla(171, 100%, 80%, 0.3));
184  }
185
186  to {
187    filter: drop-shadow(23px 12px 28px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px -18px 28px hsla(171, 80%, 73%, 0.3));
188  }
189}

.card {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bolder;
  color: hsla(0, 0%, 0%, 0.3);
  z-index: 1;
  width: 280px;
  height: 400px;
  display: grid;
  justify-items: center;
  align-items: center;
  align-content: space-around;
  text-align: center;
  grid-template-rows: 0.25fr 0.5fr 0.25fr;
  padding: 1em;
  border-radius: 3em;
  border: solid 0.5em #fafafa;
  background: #fafafa;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgMjQwMCA4MDAiIG9wYWNpdHk9IjAuODgiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ic3NzdXJmLWdyYWQiPjxzdG9wIHN0b3AtY29sb3I9ImhzbGEoMTc0LCA3NyUsIDUwJSwgMS4wMCkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwJSI+PC9zdG9wPjxzdG9wIHN0b3AtY29sb3I9ImhzbGEoMTc0LCA3NyUsIDgwJSwgMC4yOSkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0idXJsKCNzc3N1cmYtZ3JhZCkiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwtODguNTg3MjQ5NzU1ODU5MzgpIj48cGF0aCBkPSJNIDAgMjkyLjE4MDc4ODA0ODE2NzYgUSA2MDAgNjA5Ljg4OTY2NjQwOTY4NTIgODAwIDI5MC4xNzQ1MDY0NTIzMDIxIFEgMTQwMCA2MzMuODIzNjQ1MDgwOTAxMyAxNjAwIDMxMi45MTEwMzE2MDA3MTgzMyBRIDIyMDAgNTU2LjA5OTYxNDc2MzY4NjEgMjQwMCAzMzcuNzE2MTYyODQ1MjExMSBMIDI0MDAgODAwIEwgMCA4MDAgTCAwIDM0OC40OTg2MjAwNDgzMjYyNSBaIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsNDEpIiBvcGFjaXR5PSIwLjA1Ij48L3BhdGg+PHBhdGggZD0iTSAwIDI5Mi4xODA3ODgwNDgxNjc2IFEgNjAwIDYwOS44ODk2NjY0MDk2ODUyIDgwMCAyOTAuMTc0NTA2NDUyMzAyMSBRIDE0MDAgNjMzLjgyMzY0NTA4MDkwMTMgMTYwMCAzMTIuOTExMDMxNjAwNzE4MzMgUSAyMjAwIDU1Ni4wOTk2MTQ3NjM2ODYxIDI0MDAgMzM3LjcxNjE2Mjg0NTIxMTEgTCAyNDAwIDgwMCBMIDAgODAwIEwgMCAzNDguNDk4NjIwMDQ4MzI2MjUgWiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDgyKSIgb3BhY2l0eT0iMC4yNCI+PC9wYXRoPjxwYXRoIGQ9Ik0gMCAyOTIuMTgwNzg4MDQ4MTY3NiBRIDYwMCA2MDkuODg5NjY2NDA5Njg1MiA4MDAgMjkwLjE3NDUwNjQ1MjMwMjEgUSAxNDAwIDYzMy44MjM2NDUwODA5MDEzIDE2MDAgMzEyLjkxMTAzMTYwMDcxODMzIFEgMjIwMCA1NTYuMDk5NjE0NzYzNjg2MSAyNDAwIDMzNy43MTYxNjI4NDUyMTExIEwgMjQwMCA4MDAgTCAwIDgwMCBMIDAgMzQ4LjQ5ODYyMDA0ODMyNjI1IFoiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwxMjMpIiBvcGFjaXR5PSIwLjQzIj48L3BhdGg+PHBhdGggZD0iTSAwIDI5Mi4xODA3ODgwNDgxNjc2IFEgNjAwIDYwOS44ODk2NjY0MDk2ODUyIDgwMCAyOTAuMTc0NTA2NDUyMzAyMSBRIDE0MDAgNjMzLjgyMzY0NTA4MDkwMTMgMTYwMCAzMTIuOTExMDMxNjAwNzE4MzMgUSAyMjAwIDU1Ni4wOTk2MTQ3NjM2ODYxIDI0MDAgMzM3LjcxNjE2Mjg0NTIxMTEgTCAyNDAwIDgwMCBMIDAgODAwIEwgMCAzNDguNDk4NjIwMDQ4MzI2MjUgWiIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDE2NCkiIG9wYWNpdHk9IjAuNjIiPjwvcGF0aD48cGF0aCBkPSJNIDAgMjkyLjE4MDc4ODA0ODE2NzYgUSA2MDAgNjA5Ljg4OTY2NjQwOTY4NTIgODAwIDI5MC4xNzQ1MDY0NTIzMDIxIFEgMTQwMCA2MzMuODIzNjQ1MDgwOTAxMyAxNjAwIDMxMi45MTEwMzE2MDA3MTgzMyBRIDIyMDAgNTU2LjA5OTYxNDc2MzY4NjEgMjQwMCAzMzcuNzE2MTYyODQ1MjExMSBMIDI0MDAgODAwIEwgMCA4MDAgTCAwIDM0OC40OTg2MjAwNDgzMjYyNSBaIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDAsMjA1KSIgb3BhY2l0eT0iMC44MSI+PC9wYXRoPjxwYXRoIGQ9Ik0gMCAyOTIuMTgwNzg4MDQ4MTY3NiBRIDYwMCA2MDkuODg5NjY2NDA5Njg1MiA4MDAgMjkwLjE3NDUwNjQ1MjMwMjEgUSAxNDAwIDYzMy44MjM2NDUwODA5MDEzIDE2MDAgMzEyLjkxMTAzMTYwMDcxODMzIFEgMjIwMCA1NTYuMDk5NjE0NzYzNjg2MSAyNDAwIDMzNy43MTYxNjI4NDUyMTExIEwgMjQwMCA4MDAgTCAwIDgwMCBMIDAgMzQ4LjQ5ODYyMDA0ODMyNjI1IFoiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMCwyNDYpIiBvcGFjaXR5PSIxLjAwIj48L3BhdGg+PC9nPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: revert;
  box-shadow: 5px 5px 7px hsla(0, 0%, 84%, 0.447), -3px -4px 7px rgba(255, 255, 255, 0.3843137255);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-position 1s ease-in;
  animation: blinkShadowsFilter 8s ease-in infinite;
}

.card .heading {
  align-self: baseline;
  display: grid;
  letter-spacing: 3px;
}

.card .heading span {
  -webkit-background-clip: text;
  background-clip: text;
  color: #afafaf;
  background-color: transparent;
  transition: all 1s ease-in;
  transform: translateY(-20%);
  text-align: center;
  font-size: 3.5em;
}

.card button {
  align-self: flex-end;
  font-size: 1em;
  border-style: none;
  padding: 1em;
  border-radius: 5em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bolder;
  text-shadow: 3px 3px 5px #48beb3, -3px -3px 5px #68ffff;
  color: #e0fff8;
  background: #12a597;
  background: linear-gradient(145deg, #5ef8e9, #4fd1c4);
  box-shadow: 3px 3px 5px #48beb3, -3px -3px 5px #68ffff;
}

.card button:active {
  background: #57e9db;
  box-shadow: inset 3px 3px 5px #47bfb4, inset -3px -3px 5px #67ffff;
}

.card button:hover {
  cursor: pointer;
}

.card:hover {
  background-position: right;
}

.card:hover .heading span {
  background-repeat: no-repeat;
  background-size: cover;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgODAwIDgwMCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJjY2NpcmN1bGFyLWdyYWQiIHI9IjUwJSIgY3g9IjUwJSIgY3k9IjUwJSI+CiAgICAgICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjYWMzZDAwIiBzdG9wLW9wYWNpdHk9IjAuNSI+PC9zdG9wPgogICAgICAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iaHNsKDI1LCA4MyUsIDQ5JSkiIHN0b3Atb3BhY2l0eT0iMSI+PC9zdG9wPgogICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjZTc4IiBzdG9wLW9wYWNpdHk9IjEiPjwvc3RvcD4KICAgICAgICA8L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2NjY2lyY3VsYXItZ3JhZCkiPjxjaXJjbGUgcj0iNjQzLjUiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iNTg1IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjUyNi41IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjQ2OCIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PGNpcmNsZSByPSI0MDkuNSIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PGNpcmNsZSByPSIzNTEiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iMjkyLjUiIGN4PSI0MDAiIGN5PSI0MDAiPjwvY2lyY2xlPjxjaXJjbGUgcj0iMjM0IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjE3NS41IiBjeD0iNDAwIiBjeT0iNDAwIj48L2NpcmNsZT48Y2lyY2xlIHI9IjExNyIgY3g9IjQwMCIgY3k9IjQwMCI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==");
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 1s ease-in;
}

.content .item {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  gap: 1em;
  align-items: center;
  transition: all 0.8s ease-in-out;
}

.content .item span {
  transition: all 0.5s ease-in;
  width: 0%;
  background: transparent;
  font-size: 1.2em;
}

.content .item--create {
  transition: all 0.8s ease-in-out;
  transform: translateX(100%);
}

.content .item--post {
  transition: all 0.8s ease-in-out;
  transform: translateX(80%);
}

.content .item--inspire {
  transition: all 0.8s ease-in-out;
  transform: translateX(20%);
}

.content .item--inspire svg {
  box-shadow: 4px 4px 7px #47bfb4, -4px -4px 7px #67ffff;
}

.content svg {
  border-radius: 1em;
  width: 2.5em;
  height: 2.5em;
  padding: 0.5em;
  background: #fafafa;
  box-shadow: 4px 4px 7px #d5d5d5, -4px -4px 7px #ffffff;
}

.content:hover .item {
  padding-left: 2em;
}

.content:hover .item--create {
  transform: translateX(20%);
}

.content:hover .item--post {
  transform: translateX(20%);
}

.content:hover .item--inspire {
  transform: translateX(20%);
}

.item:hover {
  gap: 2em;
  color: hsl(19, 78%, 65%);
  cursor: pointer;
}

.item:hover span {
  letter-spacing: 2px;
  padding-inline: 1rem;
  border-radius: 1em;
  color: rgba(0, 0, 0, 0.6);
}

.item:hover svg {
  box-shadow: inset 4px 4px 7px #d5d5d5, inset -4px -4px 7px #ffffff;
}

@keyframes blinkShadowsFilter {
  0% {
    filter: drop-shadow(23px 12px 28px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px -18px 28px hsla(171, 80%, 73%, 0.3));
  }

  25% {
    filter: drop-shadow(23px -12px 24px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px 18px 24px hsla(171, 100%, 93%, 0.3));
  }

  50% {
    filter: drop-shadow(23px 12px 30px hsla(218, 100%, 88%, 0.3)) drop-shadow(-20px 18px 30px hsla(171, 95%, 83%, 0.3));
  }

  75% {
    filter: drop-shadow(20px -18px 25px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px 20px 25px hsla(171, 100%, 80%, 0.3));
  }

  to {
    filter: drop-shadow(23px 12px 28px hsla(218, 87%, 88%, 0.3)) drop-shadow(-20px -18px 28px hsla(171, 80%, 73%, 0.3));
  }
}

Toggle prefixes

880 views

Copy to Figma

880 views

Comments

No variations yet

MIT License

Copyright - 2024 MijailVillegas  

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.