Card by Praashoo7

#131417

1/* CodePen Card */
2
3.card {
4  width: 15em;
5  height: 10em;
6  background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
7  background-size: 800% 800%;
8  -webkit-animation: AnimationName 3s ease infinite;
9  -moz-animation: AnimationName 3s ease infinite;
10  animation: AnimationName 3s ease infinite;
11  transition: .4s ease-in-out;
12  border-radius: 7px;
13  cursor: pointer;
14}
15
16.fl {
17  display: flex;
18  justify-content: flex-end;
19  opacity: 0;
20  transition: .2s ease-in-out;
21}
22
23.fl:hover .fullscreen {
24  scale: 1.2;
25}
26
27.fl:hover .fullscreen_svg {
28  fill: white;
29}
30
31.fullscreen {
32  width: 1.5em;
33  height: 1.5em;
34  border-radius: 5px;
35  background-color: #727890;
36  margin: 1em;
37  margin-right: 0.5em;
38  display: flex;
39  align-items: center;
40  justify-content: center;
41  transition: .2s ease-in-out;
42  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
43}
44
45.fullscreen_svg {
46  width: 15px;
47  height: 15px;
48  fill: rgb(177, 176, 176);
49  transition: .2s ease-in-out;
50}
51
52.card_back {
53  position: absolute;
54  width: 15em;
55  height: 13em;
56  background-color: rgba(30, 31, 38, 0.575);
57  border-radius: 7px;
58  margin-top: -4.7em;
59  margin-left: 0.7em;
60  transition: .2s ease-in-out;
61  z-index: -1;
62}
63
64.main:hover .card_back {
65  margin-top: -5.9em;
66  margin-left: 0em;
67  scale: 1.1;
68  height: 15.25em;
69  cursor: pointer;
70}
71
72.main:hover .fl {
73  opacity: 1;
74  cursor: pointer;
75  margin-right: 0.5em;
76}
77
78.data {
79  display: flex;
80  flex-direction: row;
81  margin-top: 1em;
82}
83
84.img {
85  width: 2.25em;
86  height: 2.25em;
87  background-color: #252525;
88  border-radius: 5px;
89  overflow: hidden;
90}
91
92.text {
93  display: flex;
94  justify-content: center;
95  flex-direction: column;
96  margin-left: 0.5em;
97  font-family: Montserrat;
98  color: white;
99}
100
101.text_m {
102  font-weight: bold;
103  font-size: 0.9em;
104}
105
106.text_s {
107  font-size: 0.7em;
108}
109
110.btns {
111  display: flex;
112  gap: 0.5em;
113  transition: .2s ease-in-out;
114}
115
116.likes {
117  display: flex;
118  align-items: center;
119  justify-content: center;
120  width: 2.5em;
121  height: 1.4em;
122  border-radius: 4px;
123  margin-top: -0.5em;
124  opacity: 0;
125  background-color: #444857;
126  transition: .2s ease-in-out;
127}
128
129.likes_text {
130  font-family: Montserrat;
131  font-size: 0.8em;
132  margin-left: 0.25em;
133  color: white;
134}
135
136.likes_svg {
137  width: 12px;
138  height: 12px;
139  fill: white;
140}
141
142.likes:hover {
143  background-color: #5A5F73;
144  cursor: pointer;
145}
146
147.comments {
148  display: flex;
149  align-items: center;
150  justify-content: center;
151  width: 2.5em;
152  height: 1.4em;
153  border-radius: 4px;
154  margin-top: -0.5em;
155  opacity: 0;
156  background-color: #444857;
157  transition: .24s ease-in-out;
158}
159
160.comments_text {
161  font-family: Montserrat;
162  font-size: 0.8em;
163  margin-left: 0.25em;
164  color: white;
165}
166
167.comments_svg {
168  width: 12px;
169  height: 12px;
170  fill: white;
171}
172
173.comments:hover {
174  background-color: #5A5F73;
175  cursor: pointer;
176}
177
178.views {
179  display: flex;
180  align-items: center;
181  justify-content: center;
182  width: 3em;
183  height: 1.4em;
184  border-radius: 4px;
185  margin-top: -0.5em;
186  opacity: 0;
187  background-color: #444857;
188  transition: .28s ease-in-out;
189}
190
191.views_text {
192  font-family: Montserrat;
193  font-size: 0.8em;
194  margin-left: 0.25em;
195  color: white;
196}
197
198.views_svg {
199  width: 12px;
200  height: 12px;
201  fill: white;
202}
203
204.views:hover {
205  background-color: #5A5F73;
206  cursor: pointer;
207}
208
209.main:hover .likes {
210  margin-top: 0.5em;
211  opacity: 1;
212}
213
214.main:hover .comments {
215  margin-top: 0.5em;
216  opacity: 1;
217}
218
219.main:hover .views {
220  margin-top: 0.5em;
221  opacity: 1;
222}
223
224
225
226/* The Main Switch */
227
228.card_content {
229  display: flex;
230  align-items: center;
231  justify-content: center;
232}
233
234button {
235  padding: 0.8em;
236  width: 14em;
237  border-radius: 10px;
238  font-family: Montserrat;
239  font-size: 0.8em;
240  align-self: center;
241  outline: none;
242  font-weight: bold;
243  border: 1px solid white;
244  background-color: transparent;
245  color: white;
246  transition: .4s ease-in-out;
247}
248
249button::after {
250  content: "(Hold Me)";
251  opacity: 0;
252  position: absolute;
253}
254
255button::before {
256  content: "∞";
257  font-size: 3.5em;
258  position: absolute;
259  opacity: 0;
260  left: 1.6em;
261  top: -0.36em;
262  transition: .4s ease-in-out;
263}
264
265button:hover {
266  cursor: pointer;
267  color: black;
268  background: rgba(255, 255, 255, 0.2);
269  border-radius: 15px;
270  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
271  backdrop-filter: blur(5px);
272  -webkit-backdrop-filter: blur(5px);
273  border: 1px solid rgba(255, 255, 255, 0.3);
274}
275
276button:hover::after {
277  position: relative;
278  opacity: 1;
279  font-size: 0.7em;
280}
281
282@keyframes AnimationName {
283  0% {
284    background-position: 0% 50%
285  }
286
287  50% {
288    background-position: 100% 50%
289  }
290
291  100% {
292    background-position: 0% 50%
293  }
294}
295
296button:active {
297  scale: 1.1;
298  opacity: 1;
299  color: transparent;
300  background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);
301  background-size: 800% 800%;
302  -webkit-animation: AnimationName 1s ease infinite;
303  -moz-animation: AnimationName 1s ease infinite;
304  animation: AnimationName 1s ease infinite;
305}
306
307button:active::before {
308  color: white;
309  opacity: 1;
310}

/* CodePen Card */

.card {
  width: 15em;
  height: 10em;
  background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 3s ease infinite;
  -moz-animation: AnimationName 3s ease infinite;
  animation: AnimationName 3s ease infinite;
  transition: .4s ease-in-out;
  border-radius: 7px;
  cursor: pointer;
}

.fl {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: .2s ease-in-out;
}

.fl:hover .fullscreen {
  scale: 1.2;
}

.fl:hover .fullscreen_svg {
  fill: white;
}

.fullscreen {
  width: 1.5em;
  height: 1.5em;
  border-radius: 5px;
  background-color: #727890;
  margin: 1em;
  margin-right: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease-in-out;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
}

.fullscreen_svg {
  width: 15px;
  height: 15px;
  fill: rgb(177, 176, 176);
  transition: .2s ease-in-out;
}

.card_back {
  position: absolute;
  width: 15em;
  height: 13em;
  background-color: rgba(30, 31, 38, 0.575);
  border-radius: 7px;
  margin-top: -4.7em;
  margin-left: 0.7em;
  transition: .2s ease-in-out;
  z-index: -1;
}

.main:hover .card_back {
  margin-top: -5.9em;
  margin-left: 0em;
  scale: 1.1;
  height: 15.25em;
  cursor: pointer;
}

.main:hover .fl {
  opacity: 1;
  cursor: pointer;
  margin-right: 0.5em;
}

.data {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
}

.img {
  width: 2.25em;
  height: 2.25em;
  background-color: #252525;
  border-radius: 5px;
  overflow: hidden;
}

.text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 0.5em;
  font-family: Montserrat;
  color: white;
}

.text_m {
  font-weight: bold;
  font-size: 0.9em;
}

.text_s {
  font-size: 0.7em;
}

.btns {
  display: flex;
  gap: 0.5em;
  transition: .2s ease-in-out;
}

.likes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .2s ease-in-out;
}

.likes_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.likes_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.likes:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.comments {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .24s ease-in-out;
}

.comments_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.comments_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.comments:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.views {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 1.4em;
  border-radius: 4px;
  margin-top: -0.5em;
  opacity: 0;
  background-color: #444857;
  transition: .28s ease-in-out;
}

.views_text {
  font-family: Montserrat;
  font-size: 0.8em;
  margin-left: 0.25em;
  color: white;
}

.views_svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.views:hover {
  background-color: #5A5F73;
  cursor: pointer;
}

.main:hover .likes {
  margin-top: 0.5em;
  opacity: 1;
}

.main:hover .comments {
  margin-top: 0.5em;
  opacity: 1;
}

.main:hover .views {
  margin-top: 0.5em;
  opacity: 1;
}



/* The Main Switch */

.card_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 0.8em;
  width: 14em;
  border-radius: 10px;
  font-family: Montserrat;
  font-size: 0.8em;
  align-self: center;
  outline: none;
  font-weight: bold;
  border: 1px solid white;
  background-color: transparent;
  color: white;
  transition: .4s ease-in-out;
}

button::after {
  content: "(Hold Me)";
  opacity: 0;
  position: absolute;
}

button::before {
  content: "∞";
  font-size: 3.5em;
  position: absolute;
  opacity: 0;
  left: 1.6em;
  top: -0.36em;
  transition: .4s ease-in-out;
}

button:hover {
  cursor: pointer;
  color: black;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

button:hover::after {
  position: relative;
  opacity: 1;
  font-size: 0.7em;
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

button:active {
  scale: 1.1;
  opacity: 1;
  color: transparent;
  background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 1s ease infinite;
  -moz-animation: AnimationName 1s ease infinite;
  animation: AnimationName 1s ease infinite;
}

button:active::before {
  color: white;
  opacity: 1;
}

Toggle prefixes

4.1K views

Variation of acard

Copy to Figma

4.1K views

Variation of acard

Comments

MIT License

Copyright - 2024 Praashoo7 
Copyright - 2024 Praashoo7 (Prashant) 
Copyright - 2024 Praashoo7 (Prashant) 

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.